It is my first app with laravel. I tried too much to follow template rules to implement them in my app but actually I don't know did it in a correct way or not. Using the way I did, when I need to Redirect to a previous page it backs to / page and for example when I need to stay on the same page after submitting a form, I can not make the specific view or maybe I don't know how to use it. Do you think implementation is correct or not?
This is my master view:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="utf-8">
<title>{{ $page_title }}</title>
{{ Html::style('css/styles.css') }}
{{ HTML::script('js/core/app.js') }}
</head>
<body>
<!-- Header -->
#include('header')
<!-- Header -->
<!-- Sidebar -->
#include('sidebar')
<!-- Sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<div id="container"></div>`
</div>
<!-- /main content -->
</body>
</html>
This is my typicall included view:
#extends('Content_template')
#section('pageContents_js_files')
<script type="text/javascript" src="{{ asset("js/validate.min.js") }}"></script>
#stop
#section('pageContents')
<div></div>
#endsection
And this is a piece of html that is attached to all the typical views:
#yield('pageContents_style_files')
#yield('pageContents_js_files')
<!-- Page header -->
<div></div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
<!-- Page Contents -->
#yield('pageContents')
<!-- /Page Contents -->
<!-- Footer -->
#include('footer')
<!-- Footer -->
</div>
<!-- /content area -->
I am using ajax to include views to master template when an <a> tag with include class is clicked:
$(document).ready(function() {
$(".include").click(function(event)
{
$.ajax({
url: 'include/' + $(this).attr('id'),
type: 'GET',
success: function (data) {
$data = $(data);
$('#container').html($data);
}
});
//}
});
});
And finally the route (all the views are stored in pages directory):
Route::get('include/{param}',function($param){
return view('pages.'.$param);
}
It's not necessary to use ajax. Just yield all js an css files to master blade, also yield other pages to master, then you can call them through routes.
Related
So, I've got 3 questions
How to use Django's URLs in react
EXAMPLE:
index.js (in react)
<Router>
<div>
<nav className="navbar navbar-inverse bg-inverse">
<div className="container">
<Link to="/" className="navbar-brand">PetFinder</Link>
<Link to="/storage" className="navbar-brand">Storage </Link>
Sign-Up <== like this
</div>
</nav>
<Route exact path={"/"} component={PetRegistration} />
<Route path={"/storage"} render={() => <Storage ids={checkingName} />} />
</div>
</Router>
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
#path('api-auth/', include('rest_framework.urls', namespace="rest_framework")),
path('api/animals/', include('petsite.urls', namespace='petsite')),
path('api/user_info', core_views.UserInfo.as_view()),
path('signup/', core_views.signup, name='signup'),
path('', csrf_exempt(core_views.index), name='index'),
path(r'^login/$', auth_views.login, name='login'),
]
is_authenticated in react
How I did it:
In index.html
I wrote this ******. I am ashamed of this. Don't judge me, okay just a bit...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class="signUpBlock">
Sign-Up
</div>
<div id="root">
</div>
<span class="currentUser" style="display: none">{{user.id}}</span>
<span class="currentUserName" style="display: none">{{user.username}}</span>
<span id="DJANGO_USER" style="display: none"></span>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="text/javascript">
var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
</script>
</body>
</html>
Check the code below:
<script type="text/javascript">
var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
</script>
<span id="DJANGO_USER" style="display: none"></span>
AND THEN IN index.js I do this
let boolButString = $('#DJANGO_USER').text()
var StringToBool = (boolButString === 'true');
If StringToBool = true I do smth (means that user is logged in)
else StringToBool != true I do smth (means that user is not logged in)
if (StringToBool) {
do smth
} else {
make some tea for him
}
I don't think I did it in a right way can you suggest me smth?
Is it real to check whether a user is auth. or not?
How to display Django context in react.
You might have seen how I did it in index.html
As usual, I wrote:
def index(request):
return render(request, 'index.html', {
"user" : request.user,
})
end then
<span class="currentUser" style="display: none">{{user.id}}</span>
grab data through jquery and display it in react app.
What can you suggest me?
How to display context properly?
Sry for cups.
I am using Yeti Launch and I want to use expressions to display page information on each page.
For example, I want to display the page title and some other content specific to that page.
So the homepage would be {title: "homepage"} but I can't figure out how to have the foundation project print/display this.
Here is how I have my homepage file
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<script>
var context = {title:"Homepage | Hey this is working"};
</script>
<body>
<div id="siteContainer" class="cover">
<div class="row">
<header>
<h1>Example</h1>
</header>
</div>
<div id="navigation">
<!-- eo // navigation -->
<section id="contentWrapper">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}}
</section>
<!-- eo // section -->
</div>
<!-- eo // siteContainer -->
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
How foundation sets up the project folders
src
assets - /img/ - /js/ - /scss/
data
layouts
pages
partials
styleguide
Where should my data be stored? and How do I display or make the call to pull the data to that particular page?
Thanks!
Found the answer.
I have to define my variables at the top of the page template.
I was doing it wrong. I was adding my variables to the partial file instead of the the page template.
Reference:
http://foundation.zurb.com/sites/docs/panini.html#custom-data
http://jekyllrb.com/docs/frontmatter/
I want to add bootstrap template in my django app. I have downloaded it and kept in my static folder, then added its path in setting.py file as-
STATICFILES_DIRS = '/home/dc/my_django_apps/mutech_website/mutech/static/'
index.html of template is-
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>
but still its not working. Any suggestion will be appreciated.
First configure the static files app, in setting.py by adding this setting
STATIC_URL = '/static/'
and make sure you have all your static files/folders inside a folder called static in the root or in static folder inside your app but make sure to run collectstatic command, then reference JS file from static files please use this syntax
<script src="{% static 'js/classie.js' %}"></script>
and for linking the CSS:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
You will need 3 variables in your settings.py:
# Alias that will be written in the source code
STATIC_URL = '/public/'
# The actual folder where static files will be collected
STATIC_ROOT = 'static'
# Location of folders that will be added to static folder
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "folder_one", "folder_two", "static"),
)
After this, you'll need to run the command
python manage.py collectstatic
that will copy all static files to the STATIC_ROOT.
After this, you can use the static files in the template. Just add the tag to the template
{% load staticfiles %}
and use the static tag:
{% static 'folder_one/folder_two/path_to_static' %}
You can also use
... src="/public/folder_one/folder_two/path_to_static" ...
but if you want to change the alias one day, you'll have to change all of them... so, the first option is much better.
You'll have to check the static folder to see what path you'll have to use.
And django will write something like this
'/public/folder_one/folder_two/path_to_static'
When you make this work, have a look at bower and bower-installer
The first will download all packages that you need with a single command. The second will put all the files you need in a specific folder. This is quite good because you don't have to download one by one.
bower.json example
{
"name": "your_project_name",
"version": "1.0.0",
"authors": [
"you Name <your#email>"
],
"license": "License type",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"dependencies": {
"jquery": "latest",
"bootstrap": "latest"
},
"install": {
"path": "where/do/you/want/your/files"
}
}
Just add more dependencies and you're done. Then check bower-installer. It will copy only the files you need to a directory and not the whole source code for each package. when you're done you can remove the bower folder if you want and leave only the bower-installer folder.
I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.