• 1
a.atalla

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

سؤال

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

 

علي بركة الله نبدأ أول مشروع جماعي في قسم بايثون  , وقد تم اﻷتفاق علي أن يكون تطبيق ويب لموقع شبيه بـ 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

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

 

post-232044-0-06608000-1367181019_thumb.

 

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

تم تعديل بواسطه a.atalla
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

156 إجابة على هذا السؤال .

  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

عن طريق معلوماتي الكسيحة في 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

 

post-232044-0-60593100-1367222060_thumb.

تم تعديل بواسطه a.atalla
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

 

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

تم تعديل بواسطه MuStafa - HaSsan
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

تم تعديل بواسطه a.atalla
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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

 

 

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

تم تعديل بواسطه MuStafa - HaSsan
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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

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

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

 

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

public/css/site.css 

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

 

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

 

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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

 

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

 

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

 

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

تم تعديل بواسطه MuStafa - HaSsan
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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'	
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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

 

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

 

يعني انت اكملت 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():
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

صراحة الموضوع يحتاجلة وقت لتعلمه لل 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")}} 

ﻻ يخرج حقول !

 

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

 

ﻻكن للاسف

 

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

تم تعديل بواسطه MuStafa - HaSsan
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

هذا كود HTML خاطئ

 

 

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

 

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

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

  {% block content %}  {% endblock %} 
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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%}
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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 %}
تم تعديل بواسطه a.atalla
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

العرض ك 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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

تم لكني  وضعت زر اخر في صفحة  الكود الملون لعمل  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;}
تم تعديل بواسطه a.atalla
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

**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'} 
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جعلته على نضام 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)   		
تم تعديل بواسطه MuStafa - HaSsan
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .