Django 2.0 with Bootstrap 4 Tutorial - Complete Project.

Django 2.0 with Bootstrap 4 Tutorial - Complete Project.

TZ boy

TZ boy

JF-Expert Member
Joined
Jan 11, 2012
Posts
630
Reaction score
184
SHARING IS CARING


Habari za sasa hivi ndugu zangu wa JF, heri ya muda na siku nyingine katika maisha yetu. ​


Bila kuzunguka sana acha niende direct kwenye topic ya leo hii.. leo hii nipo mbele yenu kuwaletea tutorial ya Django 2 na bootstrap 4 kama give back to the community kwa kuwa kwenye community hii kwa muda mrefu nimeona na mimi ni share kidogo nacho kijua.. Pia samahani kwa makosa yoyote ya kiuandishi yatakayojitokeza..


Mimi sio expert kama kuna sehemu nitakuwa sijaeleweka pia mtu yoyote asisite kuuliza na kuchangia katika maada yetu hii ya leo. Haya sasa tuanze kwa pamoja ...

1. INSTALLATION

i) Python HERE
ii) Boostrap 4
iii) Font awesome Downlaod Here

Django installization run command hizi katika cmd yako baada ya ku install python na ukatest ina fanya kazi vizuri bila tatizo lolote.

Code: 
pip install Django==2.0.4


2. START THE PROJECT

Django ni web framework iliyotengenezwa kwa lugha ya python na ni moja kati ya framework inayotumika na baadhi ya big website duniani, kama pentest,google, Ouora and others, nNa kila kunapokucha inajipatia umaarufu mkubwa Duniani. Kwa hiyo tutaanza kwa tengeneza folder linaloitwa JF

3. CREATE PROJECT
Ni muda wa kutengeneza project yetu run command hii ndani ya folder la JF


Code: 
django-admin startproject website


Kama hivi hapa chini kwenye picha!


TPvRVMC.png



Ndani ya project tunaweza kuwa na different apps kwani Django ina-treat project kama big container ambapo ndani yake inaweza kuwa na different apps kama blog, vote, rank, n.k

Baada ya kutengeneza project kuna python files zitatokea

ezuYptI.png



urls.py
Hutumiaka ku map different app urls katika project yetu

settings.py
Hutumika ku set settings kama templates settings apps settings kama tika project yetu

wsgi.py
kwa sasa hatuna shida ya kuhofia file hii kwani project yetu ni ndogo kwahiyo sita lizungumzia kwa sasa.

manage.py
Hili ni moja ya mafiles muhimu sana katika project yetu kwani ndio file ambalo hutumika katika kurun different command katika project yetu. Ambalo huwa nje ya project folder letu la website.



4. CREATE APP

Ni muda wa ku create app yetu sana ambayo tutaiita doe run command hizi katika cmd yako

Code: 
python manage.py startapp doe

5. MIGRATE THE DATABASE
Sasa ni muda wa ku run migrate command kuwenza kuapply different backend settings ziweze kufanya kazi vizuri na project yetu kama hivi

Code: 
python manage.py migrate

kama picha inavyoonesha tume apply all migrations katika builtin apps kama admin, auth, n.k ambayo ni vitu kwa sasa hatuna shida navyo kuvijua kiundani..

Uv096VK.png


Make sure una run command hizo ukiwa katika katika project folder

6. ADD APP YETU KWENYE PROJECT SETTIGS

Sasa ni muda wa kuadd app yetu katika settings za project yet ili project yetu iweze kutambuliwa na project root settings, Add kama hivi..

For4YAL.png


7. TENGENEZA urls.py FILE KATIKA APP YETU

Manually tengeneza urls.py katika app yetu ambayo itakuwa ina deal na urls zote za app yetu ya doe.

8. MAP app urls KWENYE PROJECT YETU

Sasa ni muda wa ku map urls file tulilotengeneza katika app yetu kwenye project url yetu. Kama hivi chini ili iwezekutambulika na project yetu.

Code: 
from django.urls import path
from django.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('doe.urls', namespace='doe'))
]


9. STRUCTURE FILES YA APP YETU

hnK1hSV.png



admin.py
Hili files hutumika kwajili ya kuset diiferent settings kwa upande wa admin tu, kwa sasa hatuna shida nalo kwahiyo tutaliacha kwa sasa…

urls.py
Hili ni files ambalo utumiaka ku call different view katika app yetu kumbuka urls.py lililopo kwenye website project hutumika ku call different view katika apps yetu ndani ya website yetu ambapo mpaka sasa tuna app moja tu ya doe.

models.py
Hii ni files ambayo hutumika ku create databases model za app yetu ambapo kwa tutorial yetu hii ndogo kwa sasa hatuna shida nalo may be mpaka hapo baadae tutapo amua ku expand app yetu

tetst.py
Kama linavyojieleza hutumika kufanyia tests kwa app yetu inafanaya kazi kama tunavyo itaka kwa kuitets with differents inputs. Kwa sasa hatuna shida nalo pia.


10. URLS SETTINGS KATIKA APP YETU

Hii ni moja kati ya vitu vya muhimu kuvifanya katika settings zako, add code hizi urls.py kwenye app yetu ya doe kama hivi

Code: 
from django.urls import path
from . import views

app_name = 'doe'

urlpatterns = [
    path('', views.index, name='index'),
]

Kama picha inavyoonesha hapa chini


QhjX0LJ.png




11. CREATE INDEX VIEW
Kuna aina mbili za kutengeneza view kwenye framework ya Django mabazo ni class based view na function based view kwa tutorial yetu leo tutatumia function based view ambayo itakuwa rahisi kwa beginners kuelewa kinacho endeleea

Lengo ni kutengeneza view ambapo user taka request mfano index.html project yetu iweze kumpatia page hiyo aliyon weza kuirequest sasa lazima kuwe na function ambayo itafanya kazi yote iyo ya kuchukua request kwa user, kutambua page amabayo iko requested inapatikana wapi, kwenda kuiochukua na kumpa user aliye request page hiyo ndio maana tuna tengeneza function huyo itakayo fanya kazi yote hiyo hapo hapa chini...

Code: 
from django.shortcuts import render


# OUR INDEX VIEW
def index(request):

    return render(request, 'doe/index.html')


kama picha inavyoonesha hapa chini


TGqnJYa.png


Kama unavoona hapo juu tumeanza na ku def function yetu ya index ambayo tume pass request kama kawaida tuna deal na request ya GET. Chini tume return request hiyo kwa kuipont kwenye specific template name kwa kutumia special built in class ya render.



12. CREATE STATIC FALIES NA TEMPLATES FILES

Static ni files ni files kama CSS, JS, FONTS ambazo hutumiaka kwa jili ya kustyle pages zako huku templates ndipo hukaa different page kama index.html, home.html, details.html

Create static folder inside app yetu ya doe then create templates files also katika app yetu ya doe baado go inside static foder ulilotengeneza create folder linguine ambayo ni sawa na app name yako ambapo app yetu inaitwa doe hivyo hivyo na kwenye folder la templates

Folders structure iwe kama hivi..

oaIS8RY.png


13. CREATE INDEX.HTML

Sasa ni muda wa kutengeneza page ya index ndani ya folder letu la templates/doe ambyo kama ifatavyo hapa chini hapa ni baadhi yah tml codes na class za bootstrap 4 hakuna cha ajabu sana kama una tatizo napo uliza naweza kusaidia pia

HTML: 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home - Mtoto Six </title>

    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="{% static 'doe/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'doe/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'doe/css/doe.css' %}">
    <!-- END -->


</head>
<body>

    <div class="container">


        <div class="row">

            <div class="main col-12">

                {% load static %}
                <img class="mx-auto img-fluid rounded-circle img-restricted" src="{% static 'doe/img/a.jpg' %}" alt="image">

                    <p class="text-center display-4">Mtoto Six</p>
                <br>

                <blockquote class="text-center lead text-justify">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam debitis facere perspiciatis quam repellendus voluptas? Accusantium aut autem fuga fugiat itaque iusto molestias natus quasi! Atque illum minus numquam possimus?
                </blockquote>
            </div>
        </div>

        <div class="row">
            <div class="social col-12">
                <ul class="text-center list-inline">
                    <li class="list-inline-item"><a href=""><span class="fa fa-facebook fa-2x"></span></a></li>
                    <li class="list-inline-item"><a href=""><span class="fa fa-twitter fa-2x"></span></a></li>
                    <li class="list-inline-item"><a href=""><span class="fa fa-google-plus fa-2x"></span></a></li>
                </ul>
            </div>
        </div>

    </div>

    <footer>

        <p class="text-center">&copy; 2018 JF </p>

    </footer>

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="{% static 'doe/js/jquery-3.1.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'doe/js/bootstrap.bundle.js' %}"></script>
    <!-- END JAVASCRIPT -->
</body>
</html>



13. STYLE PAGE YETU YA INDEX.HTML
Kama kawaida tutatumia CCS3 kustyle page yetu ya index.html kama ifatavo hapa chini

Code: 
/**
------------------------------------------------------------------------
*/


.main {
    margin-top: 3rem;
}


.main > img {

    height: 200px;
    width: 200px;
}

.img-restricted {
   display: block
}


footer {
    background-color: #1b1e21 ;
    color: white;
    margin-top: 9rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}



/**
------------------------------------------------------------------------
*/


14. WASHA SERVER YETU
Sasa ni muda wa kuwasha server yetu kupa kile tulicho kuwa tukikitengeneza kwa muda wote huu

Code: 
python manage.py runserver

Vp8gzan.png




15. FINAL PRODUCT
Kama kila kitu utakuwa umefata kama nilivyo kuelekeza hapo juu basi hii ndio itakuwa our final product…

PoPUPXQ.png


Pia kama kuna sehemu nimeluka au hujapata concept clear please uliza maana nivigumu sana kuandika kila kitu kwa naneno bila kuluka kitu may be unaweza elewa kupitia comments. Karibuni sana. project pia inapaitkani hapa katika github page yangu HAPA for any contribution

useful resources

Thanks!
 
hii niya nini kwanza nataka kujua hiyo D jango
 
You must log in or register to reply here.

Similar Discussions

Our Community

Coming Soon

Regional Communities

Coming Soon
Back
Top Bottom
Menu
Forums
New posts
Log in
Register