طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

توسعه دهندگان وب مسئولیت های زیادی را بر عهده دارند حتی اگر آنها فقط بر روی back-end کار کنند باید کدهایی بنویسند که بر روی سرور اجرا شود. آن ها باید قادر باشند:

  • کدهایی از html را بنویسند که در مرورگر کاربر نمایش داده شود.
  • کدهای را بنویسند که به کلیک های کاربر پاسخ دهد.
  • با دیتابیس ارتباط برقرار کنند و داده های ورودی توسط کاربر را در آن ذخیره کنند.
  • برای اپلیکیشن های ios و اندروید از طریق Api های JSON و XML داده ها را فراهم بیاورند.

develper

در این مقاله می خواهیم در مورد اکثر این مهارت‌ها و تکنولوژی‌هایی که شما نیاز دارید تا به یک توسعه دهنده back-end تبدیل شوید صحبت کنیم. ما هر کدام از این مهارتها را با ساخت یک برنامه وب بسیار ساده به شما نشان خواهیم داد.

مهارت اول : یک زبان برنامه‌نویسی

در زیر کدی ساده از یک به وب اپلیکیشن آورده شده است :

from flask import Flask
app = Flask(__name__)

@app.route('/')
def main_page():
    return 'Welcome to my blog!'

این برنامه ساده منتظر مرورگر خواهد ماند تا به آن متصل شود و سپس با یک متن ساده "!Welcome to my blog" پاسخ می‌دهد :

backend

من تصمیم گرفتم این اپلیکیشن را با استفاده از زبانی به نام پایتون و کتابخانه ای به نام Flask بنویسم. اما برنامه ای ساده مثل این تقریبا می تواند با استفاده از هر زبان سمت سروری همچون #Java ،JavaScript ،C و PHP نوشته شود. هنگامی که  مرورگری درخواستی را به سمت وب سرور ارسال می‌کند سرور باید پاسخ این درخواست را بدهد.

معمولا داده ها نیاز دارند از دیتابیس خوانده شوند و سپس در پاسخ به سمت مرورگر باز گردد. این فرایند توسط برنامه ای که بر روی وب سرور اجرا هست صورت می‌گیرد و برای نوشتن چنین برنامه های شما نیاز دارید یک زبان برنامه نویسی را فرا بگیرید.

مهارت دوم :  دیتابیس و SQL

اکثر وب سایت هایی که در اینترنت موجود هستند، داینامیک هستند. یعنی از دیتابیس برای ذخیره سازی داده های خود استفاده می کنند. برای نمونه یک وبلاگ را در نظر بگیرید، ما نیاز داریم مکانی را داشته باشیم که مقالات ارسالی را در آن ذخیره کنیم. در این صورت بعدا با درخواست کاربر می‌توانیم آن مقاله را به کاربرمان نشان دهیم. شما می توانید به دیتابیس به چشم مجموعه ای از صفحات داده ای نگاه کنید. یک جدول در دیتابیس موجودیتی است که داده ها در آن ذخیره میشوند. جداول، داده ها را به صورت سطر و ستون ذخیره می کند.

برای داشتن چنین وبلاگی ما دیتابیسی را ایجاد کرده ایم که حاوی جدولی به نام articles است. این جدول دارای دو ستون بوده که ستون اول title نام دارد که عنوان مقاله در آن قرار میگیرد و ستون دوم content نام دارد که محتوای مقالات در آن قرار می گیرد. ما دو ردیف ایجاد کرده ایم که نشان میدهد وبلاگ ما دارای دو مقاله است :

backend_database

اکنون باید وب اپلیکیشن خود را به روز رسانی کنیم تا مقالات را از دیتابیس خوانده و سپس آنها را در مرورگر نشان دهد. برای این کار نیاز داریم از زبان جداگانه ای استفاده کنیم. کار این زبان ارتباط برقرار کردن با دیتابیس است که زبان پرس و جو یا SQL نامیده می شود.

from flask import Flask
import sqlite3 as sql
app = Flask(__name__)

def articles():
    query = "SELECT * FROM articles"
    connection = sql.connect("test.db")
    connection.row_factory = sql.Row
    result = connection.cursor().execute(query)
    records = result.fetchall()
    connection.close()
    return records

@app.route('/')
def main_page():
    content = ""
    for record in articles():
       content += ("<p>%s: %s</p>" % (record["title"], record["content"]))
    return content

app.run()

عبارت "SELECT * FROM articles" در کد بالا با استفاده از زبان SQL نوشته شده است که به معنای دریافت تمام داده های جدول articles است. همچنین کد خود را به روز رسانی کرده ایم تا داده های خوانده شده از دیتابیس در مرورگر نمایش داده شود :

backend_sql

برنامه های زیادی برای پایگاه داده وجود دارد برای مثال میتوان به MySQL ، PostgreSQL و SQL Server اشاره کرد.  اما همه آنها مشابه همدیگر داده‌ها را در ردیف ها و ستون های جداول ذخیره می کند. اگر شما زبان SQL را بدانید قادر خواهید بود با هر کدام از این برنامه ها ارتباط برقرار کنید.

مهارت سوم : HTML

میتوان مقالات را از دیتابیس ها خوانده و در مرورگر نشان داد اما داده ها در قالب خوبی قرار نمیگیرند. برای بهبود بخشیدن به این وضعیت من قصد دارم قالبی را ایجاد کنم که بتوان داده های خوانده شده از دیتابیس را در آن قرار داد. این قالب توسط زبان نشانه گذاری متن و یا HTML ایجاد می‌شود. عنوان هر مقاله باید به عنوان هیدینگ در نظر گرفته شود و همینطور محتوای هر مقاله باید در پاراگراف ها قرار بگیرند. در این صورت مرورگرها داده های ما را در فرمت مناسب نمایش می‌دهند :

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
  </head>
  <body>
    {% for article in articles %}
      <h1>{{article["title"]}}</h1>
      <p>{{article["content"]}}</p>
    {% endfor %}
  </body>
</html>

همچنین من نیاز دارم تا کدهای مربوط به اپلیکیشن خود را برای استفاده از قالب html به روز رسانی کنم :

@app.route('/')
def main_page():
    return render_template("main.html", articles = articles())

اکنون صفحه ما در قالبی همچون شکل زیر نمایش داده می شود، صفحه ما همچنان دارای ظاهر ساده است ولی برای شروع کار کافی است :

backend_html

وبسایت حداقل از مقداری html استفاده می‌کنند. این دقیقا چیزی است که مرورگرها انتظارش را دارند. توسعه‌دهندگان back-end اغلب نیاز ندارند همه کد های HTML را خودشان بنویسند. آنها معمولا در این موضوع بر توسعه دهندگان front-end تکیه دارند. اما هنوز آنها نیاز دارند کدهای HTML را درک کنند. فهم زبان HTML به آنها کمک می‌کند تا بتوانند راحت‌تر داده ها را در صفحات درج کنند.

مهارت چهارم : API های JSON یا XML

مرورگر های وب تنها برنامه‌هایی نیستند که با یک اپلیکیشن وب ارتباط برقرار میکند. اغلب یک کمپانی اپلیکیشن‌های موبایل را نیز برای ios و اندروید به همراه وب سایت اصلی خود ارائه می دهد. به علاوه  برنامه هایی وجود دارند که مبتنی بر مرورگر بوده و از جاوااسکریپت استفاده می کنند نه HTML ارائه شده توسط سرور. این کار از طریق فریمورک هایی همچون React و Angular انجام می‌شود.

برای بازیابی داده به منظور نمایش آنها، این اپلیکیشن ها نیاز به یک Application Programmer Interface و یا به عبارتی دیگر API دارند که به آن متصل شوند.

HTML زبانی مفید برای فرمت بندی محتوا در مرورگر ها است اما همچنان فرمت های بهتری نیز برای داده ها وجود دارند که توسط دیگر برنامه ها استفاده میشوند. فرمت رایج برای داده های API عبارتند از JSON و XML .

برای مثال با استفاده از فرمت JSON به طریق زیر می توان مقالات خود را فرمت بندی کنیم :

[{"title":"First post...",   "content":"From my new blog app!"},
 {"title":"We got a puppy!", "content":"Her name is Chai."}]

این کار با استفاده از XML به شکل زیر انجام می‌شود :

<article>
    <title>First post...</title>
    <content>From my new blog app!</content>
</article>
<article>
    <title>We got a puppy!</title>
    <content>Her name is Chai.</content>
</article>

اکنون وقت آن رسیده تا اپلیکیشن خود را به روز رسانی کنیم تا بتوانیم یک API ساده را به آن اضافه کنیم. این API تمام مقالات وبلاگ ما را از دیتابیس گرفته و به فرمت JSON ارائه می دهد :

@app.route('/articles.json')
def articles_json():
    return json.dumps([dict(row) for row in articles()])

حالا زمانی که یک مرورگر وب "/articles.json" را به انتهای آدرس خود اضافه کند می‌تواند به API ما متصل شود و لیست مقالات ما را به فرمت JSON دریافت کند.

backend_json

در کجا می توانیم این مهارت ها را یاد بگیریم

اکنون که دانستیم چه مهارت هایی را باید بیاموزیم، سوال بعدی این است که در کجا می‌توان این مهارتها را آموخت؟ خوشبختانه وب پر از آموزش های مربوط به این موضوعات است بعضی از آنها قدیمی‌تر، بعضی جدیدتر، بعضی پیشرفته‌تر و بعضی ساده تر هستند. فقط کافیست بر روی آنها تمرکز کنید تا بتوانید آنها را در مدت کوتاه‌تری بیاموزید. 

منبع: لرن سورس


موافقین ۰ مخالفین ۰ ۹۸/۰۴/۲۹
شهربانو دوستی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی