-
چهارشنبه, ۲۹ دی ۱۴۰۰، ۱۰:۰۷ ب.ظ
-
۵۹۳
سلام دوستان :)
توی پست امروز قراره با هم قسمت دوم پست (ساخت یک encyclopedia با استفاده از Django - قسمت اول) رو ببینیم.
اگر یادتون باشه توی قسمت اول با همدیگه پروژه و اپلیکیشن ها رو ساختیم و همچنین فایل های back-end رو درست کردیم.
توی این قسمت قراره بخش front-end این پروژه رو بسازیم.
خب بریم شروع کنیم.
اول از همه یک فولدر بسازین و اسمشو بذارین templates.
بعد یک فولدر دیگه داخل همون فولدر templates بسازین و اسمشو بذارین encyclopedia.
خب فایل هایی که برای front-end این پروژه هستن یکم زیادن اما بیشترشون خیلی کوچک هستن برای همین من فقط مهماشو براتون اینجا میذارم و توضیح میدم و بقیشو توی یک فایل zip براتون با کل پروژه آپلود می کنم.
خب اول یک فایل درست کنین و اسمشو بذارین index.html (برای صفحه اصلی سایت).
حالا فایل index.html رو باز کنین و داخلش کد های زیر رو قرار بدین:
{% extends "encyclopedia/layout.html" %} {% block title %} Encyclopedia
{%endblock %} {% block body %}
<h1>All Pages</h1>
<ul>
{% for entry in entries %}
<li><a href="{% url 'entry' entry %}">{{ entry }}</a></li>
{% endfor %}
</ul>
{% endblock %}
توضیح: خب این چیز خاصی نداره و فقط با استفاده از بلاک for (برای اطلاعات بیشتر اینجا کلیک کنید.) اومدیم تمام entry ها رو لیست کردیم(اگر یادتون باشه توی قسمت قبل متغیر entries رو برای این فایل توی قسمت back-end فرستاده بودیم).
خب حالا بریم سراغ فایل بعدی.
یک فایل درست کنین و اسمشو بذارین entry.html.
حالا entry.html رو باز کنین و کد های زیر رو داخلش قرار بدین:
{% extends "encyclopedia/layout.html" %}
{% block title %} {{title}}{%endblock %}
{% block body %}
{{content | safe}}
<br>
<a href="{% url 'edit' title %}" class="btn btn-primary">Edit</a>
{% endblock %}
توضیح: این کد هم چیز خاصی نداره فقط یک چیز خیلی مهم داره که خواستم توضیحش بدم. اگر دقت کنین بعد از content میتونین safe | رو ببینین. همونطور که توی قسمت قبلی براتون توضیح دادم ما از زبان markdown توی این پروژه استفاده کردیم که markdown هم توی قسمت قبل براتون توضیح دادم. علت وجود این تگ اینه که markdown چیز هایی که ما نوشتیم رو به HTML تبدیل میکنه و برای فایل ما می فرسته و django یک خاصیتی داره که از نمایش تگ های HTML داخل string که برای template فرستاده شده فرار می کنه یا اصطلاحا بهش میگن escape.
یک مثال میزنم براتون:
فرض کنین ما یک کد HTML به این صورت داریم:
<strong>Django</strong>
این کد متن Django رو به صورت bold نشون میده. اما فرض کنین که ما این کد رو برای یک template در Django می فرستیم. چیزی که Django توی سایت ما نمایش میده یک متن Django به صورت bold شده نیست و دقیقا کد بالا رو نشون میده که اصلا خوب نیست !!! بنابراین ما از تگ safe استفاده کردیم که Django بجای نشون دادن یک سری کد HTML به کاربر یک متن درست نشون بده :)))
خب این فایل هم تموم شد.
بریم سراغ فایل بعدی.
یک فایل درست کنین و اسمشو بذارین add.html.
حالا فایل add.html رو باز کنین و مقادیر زیر رو داخلش قرار بدین :
{% extends "encyclopedia/layout.html" %} {% block title %} Create Page
{%endblock %} {% block body %}
<h1>Create New Page</h1>
<div class="container">
{% if message %}
<div class="alert alert-danger" style="text-align: center;" role="alert">
{{message}}
</div>
{% endif %}
<form method="POST">
{% csrf_token%}
<div class="form">
<div class="my-3">
<label for="title">Title</label>
<input
type="text"
id="title"
class="form-control"
name="title"
placeholder="Title of the page"
{% if title %}
value="{{title}}"
{% endif %}
>
</div>
<div>
<label for="content">Content</label>
<textarea class="form-control" id="content" cols="30" name="content" rows="10" placeholder="Write page content in markdown">{%if content%}{{content}}{%endif%}</textarea>
</div>
<input type="submit" value="Save" class="btn btn-primary my-3">
</div>
</form>
</div>
{% endblock %}
توضیح: شاید کد یک ذره طولانی باشه اما اصلا چیز سختی توش وجود نداره. توی این کد فرم برای اضافه کردن یک entry درست کردیم و یک دکمه هم برای submit گذاشتیم.
خب حالا یک فایل درست کنین و اسمشو بذارین edit.html.
حالا فایل edit.html رو باز کنین و مقادیر زیر رو داخلش قرار بدین:
{% extends "encyclopedia/layout.html" %}
{% block title %} Edit {{ title }} {% endblock %}
{% block body %}
<h1>Edit Page: {{ title }}</h1>
<div class="container">
{% if error %}
<h2 text-align="center">404 Not found</h2>
{% else %}
{% if message %}
<div class="alert alert-danger" style="text-align: center;" role="alert">
{{ message }}
</div>
{% endif %}
<form method="POST">
{% csrf_token%}
<div class="form mt-3">
<div>
<label for="content">New Content:</label>
<textarea class="form-control" id="content" cols="30" name="content" rows="10" placeholder="Write page content in markdown">{%if content%}{{content}}{%endif%}</textarea>
</div>
<input type="submit" value="Save" class="btn btn-primary my-3">
</div>
</form>
{% endif %}
</div>
{% endblock %}
توضیح: این هم چیز خاصی نداره باز هم مثل کد بالا یک فرم با یک دکمه submit درست کردیم. فرق خاصی با کد بالا نداره تفاوت اصلیش توی back-end هست.
خب حالا یک فایل درست کنین و اسمشو بذارین search.html.
حالا فایل search.html رو باز کنین و کد های زیر رو داخلش قرار بدین:
{% extends "encyclopedia/layout.html" %}
{% block title %}
Search Results
{% endblock %}
{% block body %}
<h3 class="alert alert-primary" role="alert" style="width: 99%;">Search Results</h1>
{% for i in page_title %}
<div class="card" style="width: 99%;">
<div class="card-body">
<h5 class="card-title">{{ i }}</h5>
<a href="/wiki/{{ i }}" class="btn btn-primary">Go To Page</a>
</div>
</div>
<br>
{% endfor %}
{% endblock %}
توضیح: اینجا هم یک div درست کردم و نتایج جستجو رو داخلش نمایش دادیم.
خب فایل های مهم تموم شدن ،فایل های زیاد دیگه ای هست ولی اونا واقعا مهم نیست، الان اینجا بذارم فقط الکی جا میگیره.
اجرا کردن پروژه هم که بلدین.
این هم از فایل zip کل پروژه که بهتون گفته بودم:
برای دانلود کلیک کنین
امیدوارم براتون مفید بوده باشه D:
آسایش 
