مشروع جماعي : تطبيق BottlePaste

[a.atalla 43]

بسم الله الرحمن الرحيم

 

علي بركة الله نبدأ أول مشروع جماعي في قسم بايثون  , وقد تم اﻷتفاق علي أن يكون تطبيق ويب لموقع شبيه بـ pastebin  الشهير

تم أختيار  اطار الويب bottle  للعمل  

كل من يريد المشاركة والتعلم في هذا المشروع  عليه أعداد بيئة العمل كالتالي :

• يمكنك العمل علي أي نظام تشغيل ولكن ينصح ينصح بأنظمة Gnu/Linux
• سنعمل داخل بيئة افتراضية تعزل ملفات المشروع عن نظامك عن طريق VirtualEnv  , عليك تثبيت  pip ثم عن طريقها  ثبت  virtualenv

easy_install pippip virtualenv

• أنشئ بيئتك اﻷفتراضية باﻷمر 

virtualenv BottlePaste

• سيتم انشاء مجلد  باسم BottlePaste  وينقل إليه بيئة بايثون متكاملة ومعزولة عن بايثون الرئيسية علي نظامك , ستجد بداخله المجلدات  bin,include,lib.
• علينا الان تفعيل البيئية اﻷفتراضية عن طريق

[email protected] PyEnvs $ source BottlePaste/bin/activate(BottlePaste)[email protected] PyEnvs $ 

لاحظ تغير شكل محث سطر اﻷوامر  وتم كتابة اسم البيئة اﻷفتراضية اللتي أنشأتها , علي هذا الوضع أي أمر ستنفذه سيتم تطبيقه داخل هذا المجلد ولن تتأثر ملفات بايثون الرئيسية في نظامك

• داخل هذه البيئة اﻷفتراضية سنقوم بتثبيت الـ Modules اللتي سنستخدمها في مشروعنا 

pip install bottle  WTForms Jinja2 SQLAlchemy  bottle-sqlalchemy 

الان أصبح لديك  مجلد BottlePaste وداخله  مجلدات bin,include,lib  تحتوي علي نسخة من مكتبات بايثون كاملة  مضافا إليها الـModules اللتي ثبتها في الخطوة السابقة .

• تم اﻷتفاق علي استخدام موقع bitbucket ومدير اﻷصدارات Mercurial  وبالتالي عليك تثبيته واختبار الأمر  hg --version.
• قام أخونا أحمد يوسف مشرف القسم باعداد هيكل عام للتطبيق يعتمد علي مكتبة bootstrap يمكنك الحصول علي نسخة منه هنا, يمكنك أن تبدأ اي تطبيق في اطار bottle بهذا النموذج
• المستودع اللذي سنعمل عليه بإذن الله  هنا, كل ما عليك هو انشاء حساب علي موقع BitBucket وعمل Follow للمشروع  وسيتم اعطاء الصلاحيات حسب توزيع العمل فيما بعد بإذن الله .
• من داخل مجلد BottlePaste الخاص بالمشروع  اسحب نسخة من السورس باﻷمر

hg clone https://bitbucket.org/a_atalla/bottlepaste

 

• المطلوب منك اﻷن تصفح مجلدات المشروع  وفهم التركيب العام , كذلك بعض القراءة توثيق المكتبات اللتي سنعمل بها 

1. Bottle Framework
2. WTForms
3. Jinja2

التصور المبدئي لرئيسية المشروع  _ قابلة للتعديل _

 

 

يرجي نشر الموضوع علي شبكات التواصل لتعم الفائدة .... بالتوفيق للجميع

تم تعديل 28 Apr 2013 بواسطه a.atalla

[ahmed_youssef 737]

الموضوع مثبت ياباشا

[sky walker 0]

كان نفسي اشارك لكن انا مشغول بالجافا سكريبت حاليا لكن اعضاء جروب مجتمع بايثون العربي ان شاء الله يشاركوا

https://www.facebook.com/groups/pythonArab/

[a.atalla 43]

عن طريق معلوماتي الكسيحة في html وبالاطلاع علي ملفي base.html و about.html صممت الصفحة الرئيسية

 

@route("/")def home():	return template('templates/home.html')

 

{% extends 'base.html' %}{% block content %}<hr><h1>BottlePaste</h1><hr><form action="demo_form.asp">Code Title: <input type="text" name="code_title" value=""> Code Author: <input type="text" name="code_author" value=""><br/>Language : <select name="lang"  style="width:158px;">  <option value="none">----Select ----</option>  <option >Python</option>  <option >PHP</option>  <option >Pascal</option></select><br><textarea name="code_area" style="width: 600px; height: 300px;"></textarea><br/><input type="button" value="Paste"></form>{%endblock %}{%block sidebar%}<style>.sidebar {background-color:black;   width: 200px;   height: 900px;   position: fixed;   right: 0px;   top: 0px;}</style><div class='sidebar'></div>{%endblock%}

 

طبعا أري أنها طريقة بدائية , ما الطريقة المثلي لتصميمها  مع استخدام  bootstrap

 

تم تعديل 29 Apr 2013 بواسطه a.atalla

[MuStafa - HaSsan 50]

جميل التصميم , ﻻكن اتفقنا تكون النماذج مبرمجة عن طريق مكتبة wtforms

 

 

انا لو اعرف انها على html لكان من البارحة اكملتها !!

تم تعديل 29 Apr 2013 بواسطه MuStafa - HaSsan

[a.atalla 43]

أنا بس كنت بامشي ايدي , وأشوف فهمت الـ Concept ولا لأ..... جاري المحاولة مع WTForms

[MuStafa - HaSsan 50]

دعه علي اخي احمد انا سوف احاول عليه البارحة كله قاعد ادرس عليه !!

[a.atalla 43]

طيب سأعد أنا قاعدة البيانات عن طريق SQLalchemy

ساجلها في Module مستقل باسم model.py ...... تمام ؟

تم تعديل 29 Apr 2013 بواسطه a.atalla

[MuStafa - HaSsan 50]

حسنا ابدا باسم الله وو انا سوف اعمل ان شاء الله بعد عودتي على Wtforms

 

واي شيء يستصعب عليك في BOTTLE قول

 

 

* عندما تكمل قاعدة البيانات اعطني خبرا لكي اربطه مع النماذج !

تم تعديل 29 Apr 2013 بواسطه MuStafa - HaSsan

[ahmed_youssef 737]

مميزات مطلوبة لهذه المرحلة

 

1- إمكانية عرض صفحة الكود raw

2- إمكانية التحميل 

3- آخر الإضافات 

 

* أي تعديلات خاصة بال css قم بوضعها في ملف  

public/css/site.css 

لاتقم بإضافة ستايلات داخل الكود 

 

الform يجب أن تكون مكتوبة ب WTForms وكذلك أسماء اللغات يجب أن تكون عامة عبر Pygments وليست hard-coded 

 

*أبشركم إن أنهيت المشروع من البارحة ﻷضع بعض الحسابات مع bottle ولكن هذا لن يمنع العمل خطوة خطوة .. ماأريكم أن أرفق ملفات ناقصة تقوموا بإكمالها ؟

[MuStafa - HaSsan 50]

ﻻ اخي احمد نريد نعمل وحدة وحدة , يااخي انت تعرفها قبل ان ننشأها (ههههههههههههههه)

 

دعنا خطوة خطوة بالله عليك !!

 

حتى مشروع المدونة تركته ووضعت تفكيري كله هنا

 

يعني انت اكملت form وكتبته wtforms

 

ام انا اكتبه اﻻن !؟

تم تعديل 29 Apr 2013 بواسطه MuStafa - HaSsan

[a.atalla 43]

جداول قاعدة البيانات

 

from sqlalchemy import create_engine , ForeignKeyfrom sqlalchemy import Column , Date , Integer , Stringfrom sqlalchemy.ext.declarative  import  declarative_baseeng = create_engine('sqlite:///bottlepaste.db',echo=True)Base = declarative_base()########################################################################class ProgrammingLanguage(Base):	__tablename__ = 'proglangs'		lang_id   = Column(Integer,primary_key=True)	lang_name = Column(String)		def __init__(self,name):		self.lang_name = name########################################################################class User(Base):	__tablename__ = 'users'		user_id   = Column(Integer,primary_key=True)	user_name = Column(String)		def __init__(self,name):		self.lang_name = name########################################################################class CodeBlock(Base):	__tablename__ = 'codeblocks'		code_id = Column(Integer,primary_key=True)	code_title = Column(String)	add_date = Column(Date)		userID = Column(Integer,ForeignKey('users.user_id'))	langID = Column(Integer,ForeignKey('proglangs.lang_id'))		def __init__(self,title,date):		self.code_title = title		self.add_data = date		def createDB():	Base.metadata.create_all(eng)import os.pathif not os.path.isfile('bottlepaste.db'):	print 'File not exist , will create it'	createDB()else:	print 'Database file already exist , DO Nothing'	

[Khalid Mohamed98 1]

ممكن بعد متنتهوا من هذا المشروع تعملو مشروع بس تطبيقات سطح مكتب

[a.atalla 43]

اريد ان أعرف بعد تصميم الفورم , كيف سيتم الربط بين ضغط الزر ودالة بايثونية  ؟؟؟؟؟؟

هل تحتاجون في قواعد البيانات لدوال إضافة  حقول  أم أنها ستكون في موديول اخر ؟؟

[MuStafa - HaSsan 50]

حاليا اعمل على forms

[ahmed_youssef 737]

ﻻ اخي احمد نريد نعمل وحدة وحدة , يااخي انت تعرفها قبل ان ننشأها (ههههههههههههههه)

 

دعنا خطوة خطوة بالله عليك !!

 

حتى مشروع المدونة تركته ووضعت تفكيري كله هنا

 

يعني انت اكملت form وكتبته wtforms

 

ام انا اكتبه اﻻن !؟

 

أنا كتبته لي ليس أكثر، سأكمل معكم خطوة بخطوة

قم بتصميم الفورم كما هو مقترح في النموذج

 

جداول قاعدة البيانات

 

from sqlalchemy import create_engine , ForeignKeyfrom sqlalchemy import Column , Date , Integer , Stringfrom sqlalchemy.ext.declarative  import  declarative_baseeng = create_engine('sqlite:///bottlepaste.db',echo=True)Base = declarative_base()########################################################################class ProgrammingLanguage(Base):	__tablename__ = 'proglangs'		lang_id   = Column(Integer,primary_key=True)	lang_name = Column(String)		def __init__(self,name):		self.lang_name = name########################################################################class User(Base):	__tablename__ = 'users'		user_id   = Column(Integer,primary_key=True)	user_name = Column(String)		def __init__(self,name):		self.lang_name = name########################################################################class CodeBlock(Base):	__tablename__ = 'codeblocks'		code_id = Column(Integer,primary_key=True)	code_title = Column(String)	add_date = Column(Date)		userID = Column(Integer,ForeignKey('users.user_id'))	langID = Column(Integer,ForeignKey('proglangs.lang_id'))		def __init__(self,title,date):		self.code_title = title		self.add_data = date		def createDB():	Base.metadata.create_all(eng)import os.pathif not os.path.isfile('bottlepaste.db'):	print 'File not exist , will create it'	createDB()else:	print 'Database file already exist , DO Nothing'	

لاأوافق، الموقع لايدعم فكرة تسجيل المستخدم ، ربما لاحقا عبر twitter او facebook لكن للآن لايوجد سوى model لCodePaste

 

 class PasteForm(Form):  

تشمل حقول author, title, language, code

 

 

ممكن بعد متنتهوا من هذا المشروع تعملو مشروع بس تطبيقات سطح مكتب

 

تستطيع إضافة إقتراحك لايوجد مشاكل

اريد ان أعرف بعد تصميم الفورم , كيف سيتم الربط بين ضغط الزر ودالة بايثونية  ؟؟؟؟؟؟

هل تحتاجون في قواعد البيانات لدوال إضافة  حقول  أم أنها ستكون في موديول اخر ؟؟

بعد تصميم الفورم ووضعها في الtemplate سيوجد شئ مشابه لهذا

 

      <form class="form-horizontal" action="/new" method="post">            <fieldset>                <legend>New paste</legend>                    {% for field in form %}                     <div class="control-group">                        <label class="control-label" for="{{field.name}}"> {{field.label}}</label>                        <div class="controls">                            {{ field }}                        </div>                     </div>                    {% endfor %}                    <div class="control-group">                        <div class="controls">                            <button type="submit" class="btn">Paste it</button>                        </div>                    </div>                                     </fieldset> 

يقوم بإرسال POST إلى دالة new سيتم تعريفها بإستخدام

[email protected]('/new', method="POST")def new():

[MuStafa - HaSsan 50]

صراحة الموضوع يحتاجلة وقت لتعلمه لل wtforms

 

المهم كتبت النتائج ﻻكن يخرج لي مشكلة عدم ضهور الحقول

 

ﻻحض هنا

 

 

from bottle import run,redirect,request,debug,route,template,postfrom wtforms import Form, BooleanField, TextField, validators,TextAreaFieldclass bottlepast(Form):    	username = TextField('title coder', [validators.Length(min=4, max=25)])	title = TextField('author', [validators.Length(min=6, max=35)])	text = TextAreaField('Text', id="content-area", validators=[validators.Required()])@route('/')def paste():	form = bottlepast()	return template('sign.tpl',form=form)	    run(host='localhost',port=8080) 	

والتمبلت

 

<html><form action="/" method="POST">        {{ form.username }}     {{ form.email }}     {{form.text(cols="35", rows="20")}}    <input type="submit" value=""></form>

الناتج يخرج هكذا

 

 {{ form.username }}{{ form.email }}{{form.text(cols="35", rows="20")}} 

ﻻ يخرج حقول !

 

صراحة للام ممصمم التمبلت مجرد وضعت ﻻستلام الحقول اريد اجربه

 

ﻻكن للاسف

 

ﻻ اعرف السبب اين

تم تعديل 29 Apr 2013 بواسطه MuStafa - HaSsan

[ahmed_youssef 737]

هذا كود HTML خاطئ

 

 

دائما وأبدا عندما تنشئ template جديد اكتب فيه التالي 

 

 {% extends "base.html" %}  {% block content %}  {% endblock %}  

وضع الكود الذي تريد بين 

  {% block content %}  {% endblock %} 

[a.atalla 43]

هذه الفورم تعمل  معي

 

class NewPasteForm(Form):	username = TextField('Username')	codetitle = TextField('Code Title')	codebody = TextAreaField('Code')	@route('/test')def login():	frm = NewPasteForm()	return template('templates/test.htm',form=frm)

والـ template

 

{%extends 'base.html'%}{%block content%}<hr><h1>BottlePaste</h1><hr><hr><form method="POST" action="/login"><legend>New Paste : </legend>    <div>{{ form.username.label }} {{ form.username() }}</div>    <div>{{ form.codetitle.label }} {{ form.codetitle() }}</div>    <div>{{form.codebody.label}} {{form.codebody()}} </div></form>{%endblock%}

[a.atalla 43]

1- إمكانية عرض صفحة الكود raw

 

تم

 

ملف  app.py

from wtforms import Form ,validators,TextField,PasswordField,TextAreaFieldclass NewPasteForm(Form):	codeauthor = TextField('Username',[validators.Length(max=10)])	codetitle = TextField('Code Title',[validators.Length(max=10)])	codebody = TextAreaField('Code')@route('/result', method="POST")def new():	frm = NewPasteForm(request.POST)	return template('templates/result.html',form=frm)

 

ملف  templates/home.html

{% extends 'base.html' %}{% block content %}<hr><h1>BottlePaste</h1><hr><form class="form-horizontal" action="/result" method="post"><legend>New Paste : </legend>    <div>{{ form.codeauthor.label }} {{ form.codeauthor() }}</div>    <div>{{ form.codetitle.label }} {{ form.codetitle() }}</div>    <div>{{form.codebody.label}} {{form.codebody(cols='90', rows='10')|safe}} </div>    <div class="control-group">         <div class="controls">              <button type="submit" class="btn">Paste it</button>         </div>    </div></form>{%endblock %}

 

ملف templates/result.html

{% extends 'base.html' %}{% block content %}<hr><h1>BottlePaste</h1><hr><h3> {{form.codetitle.data}}  by  {{form.codeauthor.data}}</h3><div>{{form.codebody.data}}</div>{%endblock %}

تم تعديل 30 Apr 2013 بواسطه a.atalla

[ahmed_youssef 737]

العرض ك raw يعني إرسال HTTPResponse مصحوب ب Content-Type=text/plain

 

شئ مثل هذا

[email protected]('/raw/<n:int>')def raw(n):   paste=get_paste(n)    h={}    h['Content-Type'] = 'text/plain'    return HTTPResponse(paste.code, **h)

 

المكافئ في pastebin 

انظر هنا هذه الصفحة الرئيسية لعرض الكود تشمل الكثير من المعلومات

http://pastebin.com/yNXNjudc

 

وهنا صفحة ال raw 

http://pastebin.com/raw.php?i=yNXNjudc

[Khalid Mohamed98 1]

طبعا انا بفضل الله ثم فضلك ابتديت اتعلم البايثون ونفسى تعملوا مشروع سطح مكتب بس الان لا يوجد اى اقتراح لانى مبتدا ولكن لو عملتوا ساشارك

[a.atalla 43]

تم لكني  وضعت زر اخر في صفحة  الكود الملون لعمل  submit للفورم مرة أخري  (هل يمكن عمل submit  للفورم عن طريق  رابط  </a><a>)

 

اقتبست دالتك مع بعض التعديل  (ما معني   **h)

@route('/raw',method="POST")def raw():	frm = NewPasteForm(request.POST)	h={}	h['Content-Type'] = 'text/plain'	return HTTPResponse(frm.codebody.data,**h)

ثم templates/result.html

{% extends 'base.html' %}{% block content %}<hr><h1>BottlePaste</h1><hr><h3> {{form.codetitle.data}}  by  {{form.codeauthor.data}}</h3><div class="code">	{{form.codebody.data}}</div><form class="form-horizontal" action="/raw" method="post"><div>	<h5>Plain Text Code   <button type="submit" class="btn">raw</button></h5>  	{{form.codebody()}}</div></form>{%endblock %}

 

و أضفت ستايل بسيط لتميز الكود اللذي سيلون  public/css/site.css

.code{	background-color:#BFBFBF;	border-style:solid;	border-color:#7F7F7F;	border-width:2px;}

تم تعديل 30 Apr 2013 بواسطه a.atalla

[ahmed_youssef 737]

**h لتمرير المعاملات في صورة dictionary أنظر لهذا المثال

 

 >>> def func(*args, **kwargs):...     print "ARGS: ", args...     print "KWARGS: ", kwargs...  ... >>> h={}>>> h['Content-Type']='text/plain'>>> func(**h)ARGS:  ()KWARGS:  {'Content-Type': 'text/plain'}>>> func(h)ARGS:  ({'Content-Type': 'text/plain'},)KWARGS:  {}>>>   

هي نفس الشئ 

 >>> func(ContentType='text/plain')ARGS:  ()KWARGS:  {'ContentType': 'text/plain'} 

[MuStafa - HaSsan 50]

جعلته على نضام bottle . 

 

 

@route('/thecoder/:n)def raw_code(n):    paste=get_paste('%s')%int(n)    conte = response.set_header('Content-Type', 'text/plain')        if conte:        return HTTPResponse(paste.code)   		

تم تعديل 30 Apr 2013 بواسطه MuStafa - HaSsan

[MuStafa - HaSsan 50]

py gments هي راح نستخدمها في تلوين الكود !!

 

لكي نجعله افضل لنجعل لكل لغة لونها خاص !