[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 4 ~
Series list (will be updated when all articles are completed)
Preparing to create a front end
Create the folders needed to create the front end
HTML, JavaScript and CSS are called static files. Therefore, set the directory name to static and create it under crud (the same hierarchy as blog and config). In addition, create images, js, css, fonts folders under static.
Next, we will set the settings to read the static folder.
/crudconfig/settings.py
import os
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Frontend download
Download the front-end public code from the following site.
Press DOWNLOAD from "JACK FREE CSS TEMPLATE" to answer the zip.
Front end capture
Import the downloaded front-end template into Django
Unzipped files under images, js, css, fonts should be placed in the images, js, css folder under static. Copy the contents of the unzipped index.html into the home.html file under templates / blog.
Replace links with Django format
*** * See the end for the completed version *** </ font>
Write the link under the static directory created earlier in Django format. Rewrite the href link as follows.
/crud/blog/templates/blog/home.html
<link rel="stylesheet" href="css/bootstrap.min.css">
↓
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
Rewrite the src link as follows.
/crud/blog/templates/blog/home.html
<script src="js/jquery.min.js"></script>
↓
<script src="{% static 'js/jquery.min.js' %}"></script>
<div class="loader"><img src="images/loading.gif" alt="" /></div>
↓
<div class="loader"><img src="{% static 'images/loading.gif' %}" alt="" /></div>
Start the server
python manage.py runserver
Open "http://127.0.0.1:8000/".
If the same screen as the demo screen of "JACK FREE CSS TEMPLATE" is displayed, it is successful. Also, let's confirm that there is also a movement by JavaScript.
Implement a BLOG app
Now I would like to implement the app. Add the following to home.html. *** * See the end for the completed version *** </ font>
/crud/blog/templates/blog/home.html
{% for post in posts %}
<div class="row">
<div class="col-md-6">
<h1>{{ post.title }} <span>{{ post.author }}</span></h1>
<p>{{ post.date_posted }}</p>
<p>{{ post.content }}</p>
</div>
<div class="col-md-6">
<img src="{% static 'images/blog1.png' %}" alt="#" />
</div>
</div>
{% endfor %}
That's all for today.
*** Completed version of this article *** </ font>
Screen screenshot
HTML file
/crud/blog/templates/blog/home.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Jack Blogger</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<!-- style css -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<!-- Responsive-->
<link rel="stylesheet" type="text/css" href="{% static 'css/responsive.css' %}">
<!-- fevicon -->
<link rel="icon" href="{% static 'images/fevicon.png' %}" type="image/gif" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.mCustomScrollbar.min.css' %}">
<!-- Tweaks for older IEs-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout">
<!-- loader -->
<div class="loader_bg">
<div class="loader"><img src="{% static 'images/loading.gif' %}" alt="" /></div>
</div>
<!-- end loader -->
<!-- header -->
<header>
<!-- header inner -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 logo_section">
<div class="full">
<div class="center-desk">
<div class="logo"> <a href="index.html"><img src="{% static 'images/logo.png' %}"
alt="#"></a> </div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="menu-area">
<div class="limit-box">
<nav class="main-menu">
<ul class="menu-area-main">
<li class="active">
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="marketing.html">Marketing</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact us</a>
</li>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Register</a>
</li>
<li>
<a href="#"><img src="{% static 'images/search_icon.png' %}" alt="#" /></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- end header inner -->
</header>
<!-- end header -->
<!-- revolution slider -->
<div class="banner-slider">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div id="slider_main" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'images/slider_1.png' %}" alt="#" />
</div>
<div class="carousel-item">
<img src="{% static 'images/slider_1.png' %}" alt="#" />
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#slider_main" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<a class="carousel-control-next" href="#slider_main" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="col-md-5">
<div class="full slider_cont_section">
<h4>More Featured in</h4>
<h3>Jack Blogger</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a
page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content
here', making it look</p>
<div class="button_section">
<a href="about.html">Read More</a>
<a href="contact.html">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end revolution slider -->
<!-- section -->
<div class="section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading">
<h3>BLOG</h3>
</div>
</div>
</div>
{% for post in posts %}
<div class="row">
<div class="col-md-6">
<h1>{{ post.title }} <span>{{ post.author }}</span></h1>
<p>{{ post.date_posted }}</p>
<p>{{ post.content }}</p>
</div>
<div class="col-md-6">
<img src="{% static 'images/blog1.png' %}" alt="#" />
</div>
</div>
{% endfor %}
<div class="row margin_top_30">
<div class="col-md-12">
<div class="button_section full center margin_top_30">
<a style="margin:0;" href="about.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- end section -->
<!-- section -->
<div class="section layout_padding dark_bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading">
<h3>Marketing</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="{% static 'images/marketing_img.png' %}" alt="#" />
</div>
<div class="col-md-6">
<div class="full blog_cont">
<h3 class="white_font">Where can I get some</h3>
<h5 class="grey_font">March 19 2019 5 READ</h5>
<p class="white_font">There are many variations of passages of Lorem Ipsum available, but the
majority have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text. All the
Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a dictionary of over 200 Latin words,
combined g to use a passage of Lorem Ipsum, you need to be sure there isn't anything
embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet
tend to repeat predefined chunks as necessary, making this the first true generator..</p>
</div>
</div>
</div>
</div>
</div>
<!-- end section -->
<!-- section -->
<section class="layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading" style="padding-left: 15px;padding-right: 15px;">
<h4 style="border-bottom: solid #333 1px;">Comments / 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="full comment_blog_line">
<div class="row">
<div class="col-md-1">
<img src="{% static 'images/c_1.png' %}" alt="#" />
</div>
<div class="col-md-9">
<div class="full contact_text">
<h3>Veniam</h3>
<h4>Posted on Jan 10 / 2017 at 06:53 am</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="col-md-2">
<a class="reply_bt" href="#">Reply</a>
</div>
</div>
</div>
<div class="full comment_blog_line">
<div class="row">
<div class="col-md-1">
<img src="{% static 'images/c_2.png' %}" alt="#" />
</div>
<div class="col-md-9">
<div class="full contact_text">
<h3>Jack</h3>
<h4>Posted on Jan 10 / 2017 at 06:53 am</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="col-md-2">
<a class="reply_bt" href="#">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="row margin_top_30">
<div class="col-md-12 margin_top_30">
<div class="heading" style="padding-left: 15px;padding-right: 15px;">
<h4>Post : Your Comment</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="full comment_form">
<form action="index.html">
<fieldset>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<input type="text" name="name" placeholder="Name" required="#" />
<input type="email" name="email" placeholder="Email" required="#" />
</div>
<div class="col-md-6">
<textarea placeholder="Comment"></textarea>
</div>
</div>
<div class="row margin_top_30">
<div class="col-md-12">
<div class="center">
<button>Send</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- section -->
<div class="section layout_padding blog_blue_bg light_silver">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="heading">
<h3>Blog</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="full">
<div class="big_blog">
<img class="img-responsive" src="{% static 'images/blog_1.png' %}" alt="#" />
</div>
<div class="blog_cont_2">
<h3>Why do we use it</h3>
<p class="sublittle">March 19 2019 5 READ</p>
<p>It is a long established fact that a reader will be distracted by the readable content of
a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters as opposed to using Content here content
here making..</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end section -->
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<a href="#"><img src="{% static 'images/footer_logo.png' %}" alt="#" /></a>
<ul class="contact_information">
<li><span><img src="{% static 'images/location_icon.png' %}" alt="#" /></span><span
class="text_cont">London
145<br>United Kingdom</span></li>
<li><span><img src="{% static 'images/phone_icon.png' %}" alt="#" /></span><span
class="text_cont">987 654
3210<br>987 654 3210</span></li>
<li><span><img src="{% static 'images/mail_icon.png' %}" alt="#" /></span><span
class="text_cont">[email protected]<br>[email protected]</span></li>
</ul>
<ul class="social_icon">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<div class="footer_links">
<h3>Quick link</h3>
<ul>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Home</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Features</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Evens</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Markrting</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Testimonial</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer_links">
<h3>Instagram</h3>
<ol>
<li><img class="img-responsive" src="{% static 'images/footer_blog.png' %}" alt="#" /></li>
<li><img class="img-responsive" src="{% static 'images/footer_blog.png' %}" alt="#" /></li>
<li><img class="img-responsive" src="{% static 'images/footer_blog.png' %}" alt="#" /></li>
<li><img class="img-responsive" src="{% static 'images/footer_blog.png' %}" alt="#" /></li>
</ol>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer_links">
<h3>Contact us</h3>
<form action="index.html">
<fieldset>
<div class="field">
<input type="text" name="name" placeholder="Your Name" required="" />
</div>
<div class="field">
<input type="email" name="email" placeholder="Email" required="" />
</div>
<div class="field">
<input type="text" name="subject" placeholder="Subject" required="" />
</div>
<div class="field">
<textarea placeholder="Message"></textarea>
</div>
<div class="field">
<div class="center">
<button class="reply_bt">Send</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</footer>
<div class="cpy">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright © 2019 Design by <a href="https://html.design/">Free Html Templates</a></p>
</div>
</div>
</div>
</div>
<!-- end footer -->
<!-- Javascript files-->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/jquery-3.0.0.min.js' %}"></script>
<script src="{% static 'js/plugin.js' %}"></script>
<!-- Scrollbar Js Files -->
<script src="{% static 'js/jquery.mCustomScrollbar.concat.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>