دليل شامل عن خطوات انشاء موقع ويب باستخدام بايثون Flask
يُعتبر إنشاء مدونة ويب من المشاريع الشائعة التي تساعد على تعلم تطوير الويب باستخدام بايثون.
Flask هو إطار عمل ويب خفيف الوزن وسهل الاستخدام، مما يجعله خيارًا مثاليًا
لإنشاء مدونة بسيطة وقابلة للتخصيص. في هذا المقال، سنستعرض كيفية برمجة مدونة
ويب باستخدام Flask، مع التركيز على الخطوات الأساسية والأكواد البرمجية.
خطوات برمجة موقع ويب باستخدام بايثون Flask :
* تثبيت Flask والمكتبات الأخرى:
قبل البدء، يجب تثبيت Flask والمكتبات الأخرى اللازمة.
الأكواد:
pip install Flask flask-sqlalchemy
--
2. إنشاء بنية المشروع :
* يجب إنشاء بنية المشروع التي تتضمن ملفات بايثون وقوالب HTML.
* مثال على بنية المشروع:
blog/
├── app.py
├── templates/
│ ├── index.html
│ ├── post.html
│ ├── create.html
└── instance/
└── blog.db
--
* إعداد قاعدة البيانات :
يجب إعداد قاعدة بيانات لتخزين بيانات المدونة، مثل عناوين المقالات ومحتواها.
الأكواد (app.py) :
Python
from flask import Flask from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db' db = SQLAlchemy(app)
class Post(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(100)) content = db.Column(db.Text)
with app.app_context(): db.create_all()
4. إنشاء واجهة المستخدم :
* يجب إنشاء واجهة مستخدم لعرض المقالات وإنشاء مقالات جديدة.
* الأكواد (templates/index.html) :
html
<!DOCTYPE html>
<html>
<head>
<title>مدونتي</title>
</head>
<body>
<h1>مدونتي</h1>
{% for post in posts %}
<h2><a href="/post/{{ post.id }}">{{ post.title }}</a></h2>
{% endfor %}
<a href="/create">إنشاء مقال جديد</a>
</body>
</html>
--
* الأكواد (templates/post.html):
html
<!DOCTYPE html>
<html>
<head>
<title>{{ post.title }}</title>
</head>
<body>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</body>
</html>
--
* الأكواد (templates/create.html) :
<!DOCTYPE html> <html> <head> <title>إنشاء مقال جديد</title> </head> <body> <h1>إنشاء مقال جديد</h1> <form method="POST" action="/create"> <label>العنوان:</label><br> <input type="text" name="title"><br><br> <label>المحتوى:</label><br> <textarea name="content"></textarea><br><br> <input type="submit" value="نشر"> </form> </body> </html>
5. برمجة وظائف التطبيق :
* يجب برمجة وظائف التطبيق، مثل عرض المقالات وإنشاء مقالات جديدة.
* الأكواد (app.py):
from flask import render_template, request, redirect, url_for
@app.route('/') def index(): posts = Post.query.all() return render_template('index.html', posts=posts)
@app.route('/post/<int:id>') def post(id): post = Post.query.get(id) return render_template('post.html', post=post)
@app.route('/create', methods=['GET', 'POST']) def create(): if request.method == 'POST': title = request.form['title'] content = request.form['content'] new_post = Post(title=title, content=content) db.session.add(new_post) db.session.commit() return redirect(url_for('index')) return render_template('create.html')
if __name__ == '__main__': app.run(debug=True)
6. تشغيل التطبيق :
* يمكن تشغيل التطبيق باستخدام الأمر التالي :
python app.py
مميزات استخدام Flask :
* سهولة الاستخدام: Flask هو إطار عمل بسيط وسهل التعلم.
* مرونة عالية: Flask يسمح بتخصيص التطبيق بسهولة.
* مجتمع نشط: Flask لديه مجتمع نشط من المطورين الذين يقدمون الدعم والتحديثات.
الاضافات لتخصيص موقع ويب باستخدام بايثون Flask
إليك المزيد من الأكواد للتخصيص والإضافات التي يمكنك إضافتها إلى مدونة Flask :
1. إضافة تصميم CSS :
لإنشاء ملف CSS، قم بإنشاء مجلد static في جذر مشروعك، ثم قم بإنشاء ملف style.css داخله.
مثال على static/style.css:
CSS
body { font-family: sans-serif; margin: 20px;}
h1, h2 { color: #333;}
a { text-decoration: none; color: #007bff;}
a:hover { text-decoration: underline;}
form { margin-top: 20px;}
label { display: block; margin-bottom: 5px;}
input[type="text"], textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc;}
input[type="submit"] { background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer;}
* قم بتضمين ملف CSS في قوالب HTML :
HTML
<head>
<title>مدونتي</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
--
2. إضافة وظيفة التعديل والحذف :
قم بتعديل app.py لإضافة وظائف التعديل والحذف :
Python
@app.route('/post/<int:id>/edit', methods=['GET', 'POST'])def edit(id): post = Post.query.get(id) if request.method == 'POST': post.title = request.form['title'] post.content = request.form['content'] db.session.commit() return redirect(url_for('post', id=post.id)) return render_template('edit.html', post=post)
@app.route('/post/<int:id>/delete')def delete(id): post = Post.query.get(id) db.session.delete(post) db.session.commit() return redirect(url_for('index'))
* قم بإنشاء قالب edit.html :
HTML
<!DOCTYPE html><html><head> <title>تعديل المقال</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"></head><body> <h1>تعديل المقال</h1> <form method="POST" action="/post/{{ post.id }}/edit"> <label>العنوان:</label><br> <input type="text" name="title" value="{{ post.title }}"><br><br> <label>المحتوى:</label><br> <textarea name="content">{{ post.content }}</textarea><br><br> <input type="submit" value="تحديث"> </form></body></html>
* قم بتعديل post.html لإضافة روابط التعديل والحذف :
HTML
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<a href="/post/{{ post.id }}/edit">تعديل</a>
<a href="/post/{{ post.id }}/delete">حذف</a>
--
3. إضافة وظيفة البحث:
* قم بتعديل app.py لإضافة وظيفة البحث :
Python
@app.route('/search', methods=['GET', 'POST'])def search(): if request.method == 'POST': query = request.form['query'] posts = Post.query.filter(Post.title.contains(query) | Post.content.contains(query)).all() return render_template('search.html', posts=posts, query=query) return render_template('search.html', posts=[], query='')
* قم بإنشاء قالب search.html :
HTML
<!DOCTYPE html><html><head> <title>البحث</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"></head><body> <h1>البحث</h1> <form method="POST" action="/search"> <input type="text" name="query" placeholder="ابحث عن مقال..."> <input type="submit" value="بحث"> </form> {% if query %} <h2>نتائج البحث عن "{{ query }}":</h2> {% for post in posts %} <h2><a href="/post/{{ post.id }}">{{ post.title }}</a></h2> {% endfor %} {% endif %}</body></html>
* قم بإضافة نموذج البحث إلى index.html :
HTML
<form method="POST" action="/search">
<input type="text" name="query" placeholder="ابحث عن مقال...">
<input type="submit" value="بحث">
</form>
--
4. إضافة تعليقات:
تعديل نموذج قاعدة البيانات (app.py) :
Python
class Comment(db.Model): id = db.Column(db.Integer, primary_key=True) content = db.Column(db.Text) post_id = db.Column(db.Integer, db.ForeignKey('post.id')) post = db.relationship('Post', backref=db.backref('comments', lazy=True))
* تعديل صفحة المقال (templates/post.html) :
HTML
<h1>{{ post.title }}</h1> <p>{{ post.content }}</p>
<h2>التعليقات:</h2> {% for comment in post.comments %} <p>{{ comment.content }}</p> {% endfor %}
<h2>إضافة تعليق:</h2> <form method="POST" action="/post/{{ post.id }}/comment"> <textarea name="content"></textarea><br> <input type="submit" value="إضافة تعليق"> </form>
* إضافة وظيفة التعليق (app.py) :
Python
@app.route('/post/<int:id>/comment', methods=['POST'])
def comment(id):
content = request.form['content']
new_comment = Comment(content=content, post_id=id)
db.session.add(new_comment)
db.session.commit()
return redirect(url_for('post', id=id))
--
5. إضافة تصنيفات
* تعديل نموذج قاعدة البيانات (app.py) :
Python
class Category(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50))
class Post(db.Model): # ... (بقية تعريف نموذج Post) category_id = db.Column(db.Integer, db.ForeignKey('category.id')) category = db.relationship('Category', backref=db.backref('posts', lazy=True))
* تعديل نموذج إنشاء المقال (templates/create.html) :
HTML
<label>التصنيف:</label><br>
<select name="category_id">
{% for category in categories %}
<option value="{{ category.id }}">{{ category.name }}</option>
{% endfor %}
</select><br><br>
--
* تعديل وظيفة إنشاء المقال (app.py) :
Python
@app.route('/create', methods=['GET', 'POST']) def create(): categories = Category.query.all() if request.method == 'POST': # ... (بقية الكود) category_id = request.form['category_id'] new_post = Post(title=title, content=content, category_id=category_id) # ... (بقية الكود) return render_template('create.html', categories=categories)إضافة تصنيفات إلى صفحة المقال (templates/post.html):HTML
<p>التصنيف: {{ post.category.name }}</p>
6. إضافة نظام تسجيل الدخول :
* تثبيت Flask-Login :
pip install Flask-Login
* تعديل app.py :
Python
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user
login_manager = LoginManager() login_manager.init_app(app) login_manager.login_view = 'login'
class User(UserMixin, db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(50), unique=True) password = db.Column(db.String(100))
@login_manager.user_loader def load_user(user_id): return User.query.get(int(user_id))
@app.route('/login', methods=['GET', 'POST']) def login(): # ... (كود تسجيل الدخول)
@app.route('/logout') @login_required def logout(): logout_user() return redirect(url_for('index'))
@app.route('/create', methods=['GET', 'POST']) @login_required def create(): # ... (كود إنشاء المقال)
* إنشاء قوالب تسجيل الدخول والتسجيل :
* تعديل قوالب المقالات لتتطلب تسجيل الدخول :
HTML
{% if current_user.is_authenticated %}
<a href="/post/{{ post.id }}/edit">تعديل</a>
{% endif %}
--
7. استخدام محرر نصوص غني :
* تثبيت Flask-CKEditor :
pip install Flask-CKEditor
* تعديل app.py :
Python
from flask_ckeditor import CKEditor
ckeditor = CKEditor(app)
--
* تعديل نموذج إنشاء المقال (templates/create.html) :
HTML
<textarea name="content" class="ckeditor"></textarea>
--
8. نشر المدونة على الإنترنت:
* Heroku :
- إنشاء حساب على Heroku.
- تثبيت Heroku CLI.
- إنشاء ملف requirements.txt يحتوي على المكتبات المستخدمة.
- إنشاء ملف Procfile يحتوي على الأمر لتشغيل التطبيق.
- استخدام Git لنشر التطبيق على Heroku.
* PythonAnywhere:
- إنشاء حساب على PythonAnywhere.
- إنشاء مشروع Flask جديد.
- رفع ملفات المشروع إلى PythonAnywhere.
- تكوين إعدادات التطبيق على PythonAnywhere.
طريقة اضافة الامان الى تسجيل دخول موقع ويب
إليك بعض الأكواد التي يمكنك إضافتها لتعزيز أمان نظام تسجيل الدخول في تطبيق Flask :
1. تجزئة كلمات المرور:
بدلاً من تخزين كلمات المرور كنصوص عادية، يجب تجزئتها باستخدام
خوارزمية قوية مثل bcrypt أو scrypt :
* تثبيت bcrypt :
pip install bcrypt
* تعديل app.py :
Python
import bcrypt
def hash_password(password): salt = bcrypt.gensalt() hashed_password = bcrypt.hashpw(password.encode('utf-8'), salt) return hashed_password
def check_password(password, hashed_password): return bcrypt.checkpw(password.encode('utf-8'), hashed_password)
@app.route('/register', methods=['GET', 'POST'])def register(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] hashed_password = hash_password(password) new_user = User(username=username, password=hashed_password) db.session.add(new_user) db.session.commit() return redirect(url_for('login')) return render_template('register.html')
@app.route('/login', methods=['GET', 'POST'])def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] user = User.query.filter_by(username=username).first() if user and check_password(password, user.password): login_user(user) return redirect(url_for('index')) flash('اسم المستخدم أو كلمة المرور غير صحيحة') return render_template('login.html')
2. الحماية من هجمات القوة الغاشمة :
يمكنك استخدام مكتبة Flask-Limiter للحد من عدد محاولات تسجيل الدخول الفاشلة :
* تثبيت Flask-Limiter :
pip install Flask-Limiter
* تعديل app.py :
Python
from flask_limiter import Limiter
from flask_limiter.util import get_remote_address
limiter = Limiter(
app,
key_func=get_remote_address,
default_limits=["5 per minute"]
)
@app.route('/login', methods=['GET', 'POST'])
@limiter.limit("5 per minute")
def login():
# ... (كود تسجيل الدخول)
--
3. الحماية من هجمات CSRF:
توفر Flask حماية مدمجة من هجمات CSRF باستخدام Flask-WTF.
* تثبيت Flask-WTF :
pip install Flask-WTF
* تعديل app.py :
Python
from flask_wtf.csrf import CSRFProtect
csrf = CSRFProtect(app)
إضافة حقل CSRF إلى نماذج HTML:
HTML
<form method="POST" action="/login">
{{ form.csrf_token }}
</form>
--
4. استخدام HTTPS:
يجب استخدام HTTPS لتشفير الاتصال بين المستخدم والخادم.
يمكنك الحصول على شهادة SSL مجانية من Let's Encrypt.
يمكنك نشر تطبيقك على خدمات مثل Heroku أو PythonAnywhere التي توفر HTTPS تلقائيًا.
5. تحديث المكتبات:
تأكد من تحديث جميع المكتبات المستخدمة إلى أحدث الإصدارات لإصلاح الثغرات الأمنية.
6. إضافة ميزات أمان إضافية:
- المصادقة الثنائية (2FA): يمكنك استخدام مكتبات مثل Flask-Security-Too لإضافة 2FA.
- سياسة كلمات المرور القوية: يمكنك فرض سياسة كلمات مرور قوية على المستخدمين.
- تسجيل الدخول باستخدام OAuth: يمكنك السماح للمستخدمين بتسجيل الدخول
باستخدام حساباتهم على Google أو Facebook.
* ملاحظات:
هذه الأكواد هي مجرد أمثلة، ويجب تعديلها لتناسب احتياجاتك.
يجب دائمًا إجراء اختبارات أمان شاملة للتأكد من أن تطبيقك آمن.
