[Django Install] 4. Django APP Setup
[APP create]
cd
cd [project]
[Bootstrap4 HTML/CSS/js Template 설치]
HTML, scss, css, js, img, font 설치 (Education Template)
project/app/templates/app/*
*.html
project/app/static/app/*
css
scss
js
images
font
cd
cd [project]
python manage.py startapp appname
[project/settings.py]
add app
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'sass_processor',
'appname',
]
[project/urls.py]
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', include('appname.urls')),
path('admin/', admin.site.urls),
]
if settings.DEBUG is True:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
[app/urls.py]
from django.urls import path
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import TemplateView
from . import views
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
]
[app/views.py]
from django.views.generic.base import TemplateView
class IndexView(TemplateView):
template_name = 'service/index.html'
[app/templates/app/index.html]
<html>
<head>
</head>
<body>
<h3> Hello World </h3>
</body>
</html>
[test helloworld]
project/bin/run.sh
http://server
HTML, scss, css, js, img, font 설치 (Education Template)
project/app/templates/app/*
*.html
project/app/static/app/*
css
scss
js
images
font
[app/templates/app/base.html]
base.html
{% load static %}
{% load sass_tags %}
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<!-- <meta name="viewport" content="width=1024"> -->
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Never 사이트 검증 코드 -->
<!-- <meta name="naver-site-verification" content="1e1c586d8eadb2b411f83f5ce181a5e8b07aff96"/> -->
<!-- 대표 URL -->
<link rel="canonical" href="http://www.prefity.com">
<!-- Favicon-->
<link rel="shortcut icon" href="{% static 'service/img/fav.png' %}">
<!-- Author Meta -->
<meta name="author" content="Prefity">
<!-- Meta Description -->
<meta name="description" content="Profit, Predict">
<!-- Meta Keyword -->
<meta name="keywords" content="Profit, Predict">
<!-- meta character set -->
<meta charset="UTF-8">
<meta property="og:type" content="website">
<meta property="og:title" content="prefity">
<meta property="og:description" content="Profit, Predict">
<meta property="og:image" content="{% static 'service/img/fav.png' %}">
<meta property="og:url" content="http://www.prefity.com">
<!-- Site Title -->
<title>Prefity</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="{% static 'service/css/linearicons.css' %}">
<link rel="stylesheet" href="{% static 'service/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% sass_src 'service/scss/bootstrap.scss' %}">
<link rel="stylesheet" href="{% static 'service/css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'service/css/nice-select.css' %}">
<link rel="stylesheet" href="{% static 'service/css/animate.min.css' %}">
<link rel="stylesheet" href="{% static 'service/css/owl.carousel.css' %}">
<link rel="stylesheet" href="{% static 'service/css/jquery-ui.css' %}">
<link rel="stylesheet" href="{% sass_src 'service/scss/main.scss' %}">
</head>
<body>
<header id="header" id="home">
<div class="header-top">
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-8 header-top-left no-padding">
<ul>
<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-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-sm-6 col-4 header-top-right no-padding">
<a href="tel:+953 012 3654 896"><span class="lnr lnr-phone-handset"></span> <span class="text">+953 012 3654 896</span></a>
<a href="mailto:support@colorlib.com"><span class="lnr lnr-envelope"></span> <span class="text">support@colorlib.com</span></a>
</div>
</div>
</div>
</div>
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="index.html"><img src="{% static 'service/img/logo.png' %}" alt="" title="" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><a href="{% url 'index' %}">Home</a></li>
<li><a href="{% url 'index' %}">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="menu-has-children"><a href="">Blog</a>
<ul>
<li><a href="blog-home.html">Blog Home</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
</ul>
</li>
<li class="menu-has-children"><a href="">Pages</a>
<ul>
<li><a href="course-details.html">Course Details</a></li>
<li><a href="event-details.html">Event Details</a></li>
<li><a href="elements.html">Elements</a></li>
<li class="menu-has-children"><a href="">Level 2 </a>
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- #nav-menu-container -->
</div>
</div>
</header>
{% block content %}
{% endblock %}
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h4>Top Products</h4>
<ul>
<li><a href="#">Managed Website</a></li>
<li><a href="#">Manage Reputation</a></li>
<li><a href="#">Power Tools</a></li>
<li><a href="#">Marketing Service</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h4>Quick links</h4>
<ul>
<li><a href="#">Jobs</a></li>
<li><a href="#">Brand Assets</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h4>Features</h4>
<ul>
<li><a href="#">Jobs</a></li>
<li><a href="#">Brand Assets</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h4>Resources</h4>
<ul>
<li><a href="#">Guides</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Agencies</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h4>Newsletter</h4>
<p>Stay update with our latest</p>
<div class="" id="mc_embed_signup">
<form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01" method="get">
<div class="input-group">
<input type="text" class="form-control" name="EMAIL" placeholder="Enter Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Email Address '" required="" type="email">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="lnr lnr-arrow-right"></span>
</button>
</div>
<div class="info"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center justify-content-between">
<p class="footer-text m-0 col-lg-6 col-md-12"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | Made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> & distributed by <a href="https://themewagon.com" target="_blank">ThemeWagon</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-6 col-sm-12 footer-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-behance"></i></a>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
<script src="{% static 'service/js/vendor/jquery-2.2.4.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="{% static 'service/js/vendor/bootstrap.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAD48R3HAL0uQjF3RlrLzSXF61Am_CypKE"></script>
<script src="{% static 'service/js/easing.min.js' %}"></script>
<script src="{% static 'service/js/hoverIntent.js' %}"></script>
<script src="{% static 'service/js/superfish.min.js' %}"></script>
<script src="{% static 'service/js/jquery.ajaxchimp.min.js' %}"></script>
<script src="{% static 'service/js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'service/js/jquery.tabs.min.js' %}"></script>
<script src="{% static 'service/js/jquery.nice-select.min.js' %}"></script>
<script src="{% static 'service/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'service/js/mail-script.js' %}"></script>
<script src="{% static 'service/js/jquery.bootstrap.modal.forms.min.js' %}"></script> <!-- Django-bootstrap-modal-forms -->
<script src="{% static 'service/js/main.js' %}"></script>
<script src="{% static 'service/js/app.js' %}"></script> <!-- app's custom js -->
</body>
</html>
change
service/ -> appname/
{% static 'service/css/linearicons.css' %}
head meta
<link rel="canonical" href="http://sc.prefity.com">
<!-- Favicon-->
<link rel="shortcut icon" href="{% static 'dashboard/img/fav.png' %}">
<!-- Author Meta -->
<meta name="author" content="sc">
<!-- Meta Description -->
<meta name="description" content="bank">
<!-- Meta Keyword -->
<meta name="keywords" content="bank">
<!-- meta character set -->
<meta charset="UTF-8">
<meta property="og:type" content="website">
<meta property="og:title" content="sc">
<meta property="og:description" content="bank">
<meta property="og:image" content="{% static 'dashboard/img/fav.png' %}">
<meta property="og:url" content="http://sc.prefity.com">
<!-- Site Title -->
<title>SC</title>
url link
<li><a href="{% url 'index' %}">Home</a></li>
[app/static/app/js/app.js]
$(document).ready(function() {
});
[app/templates/app/index.html]
{% extends 'service/base.html' %}
{% block content %}
{% load static %}
<!-- start banner Area -->
<section class="banner-area relative" id="home">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row fullscreen d-flex align-items-center justify-content-between">
<div class="banner-content col-lg-9 col-md-12">
<h1 class="text-uppercase">
We Ensure better education
for a better world
</h1>
<p class="pt-10 pb-10">
In the history of modern astronomy, there is probably no one greater leap forward than the building and launch of the space telescope known as the Hubble.
</p>
<a href="#" class="primary-btn text-uppercase">Get Started</a>
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Start feature Area -->
<section class="feature-area">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="single-feature">
<div class="title">
<h4>Learn Online Courses</h4>
</div>
<div class="desc-wrap">
<p>
Usage of the Internet is becoming more common due to rapid advancement
of technology.
</p>
<a href="#">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="single-feature">
<div class="title">
<h4>No.1 of universities</h4>
</div>
<div class="desc-wrap">
<p>
For many of us, our very first experience of learning about the celestial bodies begins when we saw our first.
</p>
<a href="#">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="single-feature">
<div class="title">
<h4>Huge Library</h4>
</div>
<div class="desc-wrap">
<p>
If you are a serious astronomy fanatic like a lot of us are, you can probably remember that one event.
</p>
<a href="#">Join Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End feature Area -->
<!-- Start popular-course Area -->
<section class="popular-course-area section-gap">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-70 col-lg-8">
<div class="title text-center">
<h1 class="mb-10">Popular Courses we offer</h1>
<p>There is a moment in the life of any aspiring.</p>
</div>
</div>
</div>
<div class="row">
<div class="active-popular-carusel">
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p1.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Designing
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p2.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn React js beginners
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p3.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Photography
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p4.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Surveying
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p1.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Designing
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p2.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn React js beginners
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p3.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Photography
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
<div class="single-popular-carusel">
<div class="thumb-wrap relative">
<div class="thumb relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src="{% static 'service/img/p4.jpg' %}" alt="">
</div>
<div class="meta d-flex justify-content-between">
<p><span class="lnr lnr-users"></span> 355 <span class="lnr lnr-bubble"></span>35</p>
<h4>$150</h4>
</div>
</div>
<div class="details">
<a href="#">
<h4>
Learn Surveying
</h4>
</a>
<p>
When television was young, there was a hugely popular show based on the still popular fictional characte
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End popular-course Area -->
<!-- Start search-course Area -->
<section class="search-course-area relative">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 col-md-6 search-course-left">
<h1 class="text-white">
Get reduced fee <br>
during this Summer!
</h1>
<p>
inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards especially in the workplace. That’s why it’s crucial that, as women, our behavior on the job is beyond reproach.
</p>
<div class="row details-content">
<div class="col single-detials">
<span class="lnr lnr-graduation-hat"></span>
<a href="#"><h4>Expert Instructors</h4></a>
<p>
Usage of the Internet is becoming more common due to rapid advancement of technology and power.
</p>
</div>
<div class="col single-detials">
<span class="lnr lnr-license"></span>
<a href="#"><h4>Certification</h4></a>
<p>
Usage of the Internet is becoming more common due to rapid advancement of technology and power.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 search-course-right section-gap">
<form class="form-wrap" action="#">
<h4 class="text-white pb-20 text-center mb-30">Search for Available Course</h4>
<input type="text" class="form-control" name="name" placeholder="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'" >
<input type="phone" class="form-control" name="phone" placeholder="Your Phone Number" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Phone Number'" >
<input type="email" class="form-control" name="email" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address'" >
<div class="form-select" id="service-select">
<select>
<option datd-display="">Choose Course</option>
<option value="1">Course One</option>
<option value="2">Course Two</option>
<option value="3">Course Three</option>
<option value="4">Course Four</option>
</select>
</div>
<button class="primary-btn text-uppercase">Submit</button>
</form>
</div>
</div>
</div>
</section>
<!-- End search-course Area -->
<!-- Start upcoming-event Area -->
<section class="upcoming-event-area section-gap">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-70 col-lg-8">
<div class="title text-center">
<h1 class="mb-10">Upcoming Events of our Institute</h1>
<p>If you are a serious astronomy fanatic like a lot of us</p>
</div>
</div>
</div>
<div class="row">
<div class="active-upcoming-event-carusel">
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e1.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e2.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e1.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e1.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e2.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
<div class="single-carusel row align-items-center">
<div class="col-12 col-md-6 thumb">
<img class="img-fluid" src="{% static 'service/img/e1.jpg' %}" alt="">
</div>
<div class="detials col-12 col-md-6">
<p>25th February, 2018</p>
<a href="#"><h4>The Universe Through
A Child S Eyes</h4></a>
<p>
For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End upcoming-event Area -->
<!-- Start review Area -->
<section class="review-area section-gap relative">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row">
<div class="active-review-carusel">
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Fannie Rowe</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Hulda Sutton</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Fannie Rowe</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Hulda Sutton</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Fannie Rowe</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Hulda Sutton</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<img src="{% static 'service/img/r1.png' %}" alt="">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Fannie Rowe</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
<div class="single-review item">
<div class="title justify-content-start d-flex">
<a href="#"><h4>Hulda Sutton</h4></a>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker. Here you can find the best computer accessory for your laptop, monitor, printer, scanner, speaker.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- End review Area -->
<!-- Start cta-one Area -->
<section class="cta-one-area relative section-gap">
<div class="container">
<div class="overlay overlay-bg"></div>
<div class="row justify-content-center">
<div class="wrap">
<h1 class="text-white">Become an instructor</h1>
<p>
There is a moment in the life of any aspiring astronomer that it is time to buy that first telescope. It’s exciting to think about setting up your own viewing station whether that is on the deck.
</p>
<a class="primary-btn wh" href="#">Apply for the post</a>
</div>
</div>
</div>
</section>
<!-- End cta-one Area -->
<!-- Start blog Area -->
<section class="blog-area section-gap" id="blog">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-70 col-lg-8">
<div class="title text-center">
<h1 class="mb-10">Latest posts from our Blog</h1>
<p>In the history of modern astronomy there is.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 single-blog">
<div class="thumb">
<img class="img-fluid" src="{% static 'service/img/b1.jpg' %}" alt="">
</div>
<p class="meta">25 April, 2018 | By <a href="#">Mark Wiens</a></p>
<a href="blog-single.html">
<h5>Addiction When Gambling Becomes A Problem</h5>
</a>
<p>
Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their.
</p>
<a href="#" class="details-btn d-flex justify-content-center align-items-center"><span class="details">Details</span><span class="lnr lnr-arrow-right"></span></a>
</div>
<div class="col-lg-3 col-md-6 single-blog">
<div class="thumb">
<img class="img-fluid" src="{% static 'service/img/b2.jpg' %}" alt="">
</div>
<p class="meta">25 April, 2018 | By <a href="#">Mark Wiens</a></p>
<a href="blog-single.html">
<h5>Computer Hardware Desktops And Notebooks</h5>
</a>
<p>
Ah, the technical interview. Nothing like it. Not only does it cause anxiety, but it causes anxiety for several different reasons.
</p>
<a href="#" class="details-btn d-flex justify-content-center align-items-center"><span class="details">Details</span><span class="lnr lnr-arrow-right"></span></a>
</div>
<div class="col-lg-3 col-md-6 single-blog">
<div class="thumb">
<img class="img-fluid" src="{% static 'service/img/b3.jpg' %}" alt="">
</div>
<p class="meta">25 April, 2018 | By <a href="#">Mark Wiens</a></p>
<a href="blog-single.html">
<h5>Make Myspace Your Best Designed Space</h5>
</a>
<p>
Plantronics with its GN Netcom wireless headset creates the next generation of wireless headset and other products such as wireless.
</p>
<a href="#" class="details-btn d-flex justify-content-center align-items-center"><span class="details">Details</span><span class="lnr lnr-arrow-right"></span></a>
</div>
<div class="col-lg-3 col-md-6 single-blog">
<div class="thumb">
<img class="img-fluid" src="{% static 'service/img/b4.jpg' %}" alt="">
</div>
<p class="meta">25 April, 2018 | By <a href="#">Mark Wiens</a></p>
<a href="blog-single.html">
<h5>Video Games Playing With Imagination</h5>
</a>
<p>
About 64% of all on-line teens say that do things online that they wouldn’t want their parents to know about. 11% of all adult internet
</p>
<a href="#" class="details-btn d-flex justify-content-center align-items-center"><span class="details">Details</span><span class="lnr lnr-arrow-right"></span></a>
</div>
</div>
</div>
</section>
<!-- End blog Area -->
<!-- Start cta-two Area -->
<section class="cta-two-area">
<div class="container">
<div class="row">
<div class="col-lg-8 cta-left">
<h1>Not Yet Satisfied with our Trend?</h1>
</div>
<div class="col-lg-4 cta-right">
<a class="primary-btn wh" href="#">view our blog</a>
</div>
</div>
</div>
</section>
<!-- End cta-two Area -->
{% endblock %}
Change
service/ -> appname/
{% extends 'service/base.html' %}
{% static 'service/img/p1.jpg' %}
[login app/forms.py]
from bootstrap_modal_forms.forms import BSModalForm
from django import forms
from django.shortcuts import render, get_object_or_404
from django.core.validators import EmailValidator
from django.core.exceptions import ValidationError
from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
from django.contrib.auth.models import User
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin
from . import models
import re
class CustomAuthenticationForm(AuthenticationForm):
class Meta:
model = User
fields = ['username', 'password']
labels = {
'username' : '사용자ID (이메일)',
}
[login app/templates/app/login.html]
{% load widget_tweaks %}
<form method="post" action="">
{% csrf_token %}
<div class="modal-header">
<h3 class="modal-title">로그인</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% for field in form %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" placeholder=field.label %}
<div class="{% if field.errors %} invalid{% endif %}">
{% for error in field.errors %}
<p class="help-block" style="color: red; margin-bottom: 0px;">{{ error }}</p>
{% endfor %}
</div>
</div>
{% endfor %}
<!-- Hidden input field for custom redirection after successful login -->
<input type="hidden" name="next" value="{{ success_url }}">
</div>
<div class="modal-footer">
<button type="button" class="submit-btn genric-btn primary-border circle">로그인</button>
</div>
</form>
[login app/views.py]
from django.shortcuts import render, redirect, get_object_or_404
from django.urls import reverse_lazy
from django.views import View
from django.views.generic.base import TemplateView
from django.views.generic import DetailView, ListView
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse, JsonResponse
from django.utils import timezone
from django.contrib.auth import login as d_login, logout as d_logout, authenticate
from django.http import HttpResponseRedirect,HttpResponse
# from django.contrib.gis.geoip2 import GeoIP2
from django.utils.decorators import method_decorator
from bootstrap_modal_forms.generic import (BSModalCreateView,
BSModalUpdateView,
BSModalReadView,
BSModalDeleteView,
BSModalLoginView)
# from next_prev import next_in_order, prev_in_order
# from django_user_agents.utils import get_user_agent
from . import models, forms
import logging
import json
import requests
import datetime
logger = logging.getLogger('service')
class IndexView(TemplateView):
template_name = 'service/index.html'
# 로그인, 로그아웃 View
class LoginView(BSModalLoginView):
authentication_form = forms.CustomAuthenticationForm
template_name = 'service/login.html'
success_message = '성공적으로 로그인이 되었습니다.'
extra_context = dict(success_url=reverse_lazy('index'))
class LogoutView(View):
def get(self, request):
d_logout(request)
return redirect('index')
[login app/urls.py]
from django.urls import path
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import TemplateView
from . import views
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
path('login/', views.LoginView.as_view(), name='login'),
path('logout/', views.LogoutView.as_view(), name='logout'),
]
[login modal app/static/app/js/app.js]
$(document).ready(function() {
$(".login_btn").each(function () {
$(this).modalForm({formURL: $(this).data('url')});
});
});
[login modal app/templates/app/base.html]
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
[login url app/templates/app/base.html]
{% if user.is_authenticated %}
<li><a href="javascript:void(0);">
<span class="fa fa-user-circle-o fa-sm"></span> <span class="text">{{ user.username }}</span>
</a></li>
<li><a href="{% url 'logout' %}">
<span class="fa fa-sign-out fa-sm"></span> <span class="text">Logout</span>
</a></li>
{% else %}
<li><a href="javascript:void(0);" class="login_btn" data-url="{% url 'login' %}">
<span><i class="fa fa-sign-in fa-lg"></i></span> <span class="text">Login</span>
</a></li>
{% endif %}
[Template view]
class IndexView(TemplateView):
template_name = 'homepage/index.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
init_objects = get_init_object()
this_objects = {}
this_objects['main_banner'] = Content.objects.filter(content_type__code_en='main_banner', content_type1__code_en='message', status=1).order_by('display_order')
this_objects['board'] = Content.objects.filter(content_type__code_en='board', content_type1__code_en='message', status=1).order_by('-display_order', '-created')[:3]
this_objects['schedule'] = Content.objects.filter(content_type__code_en='schedule', content_type1__code_en='message', status=1).order_by('-display_order', '-created')[:3]
this_objects['conference'] = Content.objects.filter(content_type__code_en='conference', content_type1__code_en='message', process__code_en='open', status=1).order_by('-display_order', '-created')
this_objects['curriculum'] = Content.objects.filter(content_type__code_en='curriculum', content_type1__code_en='message', status=1).order_by('display_order')[:8]
this_objects['curriculum_subject'] = Content.objects.filter(content_type__code_en='curriculum_subject', content_type1__code_en='message', status=1).order_by('display_order')[:8]
this_objects['performance'] = Content.objects.filter(content_type__code_en='performance', content_type1__code_en='message', status=1).order_by('-display_order', '-created')[:16]
this_objects['review'] = Content.objects.filter(content_type__code_en='review', content_type1__code_en='message', status=1).order_by('-display_order', '-created')[:8]
this_objects['program'] = Content.objects.filter(content_type__code_en='program', content_type1__code_en='message', status=1).order_by('-display_order', '-created')[:8]
this_objects['board_title_home'] = Content.objects.filter(content_type__code_en='board', content_type1__code_en='title_home', status=1).first()
this_objects['schedule_title_home'] = Content.objects.filter(content_type__code_en='schedule', content_type1__code_en='title_home', status=1).first()
this_objects['conference_title_home'] = Content.objects.filter(content_type__code_en='conference', content_type1__code_en='title_home', status=1).first()
this_objects['curriculum_title_home'] = Content.objects.filter(content_type__code_en='curriculum', content_type1__code_en='title_home', status=1).first()
this_objects['curriculum_subject_title_home'] = Content.objects.filter(content_type__code_en='curriculum_subject', content_type1__code_en='title_home', status=1).first()
this_objects['performance_title_home'] = Content.objects.filter(content_type__code_en='performance', content_type1__code_en='title_home', status=1).first()
this_objects['review_title_home'] = Content.objects.filter(content_type__code_en='review', content_type1__code_en='title_home', status=1).first()
this_objects['program_title_home'] = Content.objects.filter(content_type__code_en='program', content_type1__code_en='title_home', status=1).first()
this_objects['program_title_home_banner'] = Content.objects.filter(content_type__code_en='program', content_type1__code_en='title_home_banner', status=1).first()
this_objects['mainpopup'] = Content.objects.filter(content_type__code_en='mainpopup', status=1).first()
# logger.info('[IndexView] : ' + str(this_objects))
context['init_objects'] = init_objects
context['this_objects'] = this_objects
create_obslog(self.request, 'page', 'index', None, 'list', None)
return context
[List view]
class BoardListView(ListView):
model = Content
paginate_by = 10
template_name = 'homepage/board.html'
def get_queryset(self):
list = Content.objects.filter(content_type__code_en='board', content_type1__code_en='message', status=1).order_by('-display_order', '-created')
return list
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
init_objects = get_init_object()
board_title =Content.objects.filter(content_type__code_en='board', content_type1__code_en='title', status=1).first()
context['init_objects'] = init_objects
context['board_title'] = board_title
create_obslog(self.request, 'page', 'board', None, 'list', None)
return context
[Detail view]
class BoardDetailView(DetailView):
model = Content
template_name = 'homepage/board_detail.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
init_objects = get_init_object()
board_title = Content.objects.filter(content_type__code_en='board', content_type1__code_en='title', status=1).first()
nextprev_list = Content.objects.filter(content_type__code_en='board', content_type1__code_en='message', status=1).order_by('-display_order', '-created')
detail_next = next_in_order(self.this_obj, qs=nextprev_list)
detail_prev = prev_in_order(self.this_obj, qs=nextprev_list)
context['init_objects'] = init_objects
context['board_title'] = board_title
context['detail_next'] = detail_next
context['detail_prev'] = detail_prev
create_obslog(self.request, 'content', 'board', self.this_obj, 'viewdetail', None)
return context
def get_object(self):
obj = super().get_object()
# Record the last accessed date
obj.query_count = obj.query_count + 1
obj.save()
self.this_obj = obj
return obj
댓글
댓글 쓰기