آموزش ساخت برنامه با Express و MongoDB برای تازه کارها – پارت 4

آموزش ساخت برنامه با Express و MongoDB برای تازه کارها – پارت 4

به بخش چهارم از آموزش ساخت برنامه با Express و MongoDB خوش آمدید. امیدوارم قسمت قبل مورد قبول قرار گرفته باشد و مراحل قبل را با موفقیت انجام داده باشید. اگر مایل هستید اجازه دهید به مراحل بعدی ساخت برنامه بپردازیم.

همانطور که می دانیم قصد داریم یک بوکمارکر ساده درست کنیم تا لینک های دلخواه خود را در قالب یک لیست نمایش دهد. در این پست نام لینک و آدرس لینک را در دیتابیس ذخیره می کنیم تا برنامه پویا بشود و اینکه لینک های ذخیره شده را بازیابی کنیم.


MongoDB

ابتدا اطمینان حاصل کنید که MongoDB را رو سیستم خود نصب کرده باشید.

آموزش mongodb

هدف مانگودی‌بی پرکردن فاصلهٔ ذخیره‌بندی‌های کلید/مقداری—که سریع و مقیاس پذیر هستند— و سامانه‌های سنتی مدیریت پایگاه داده رابطه‌ای—که درخواست‌های غنی و عملکرد عمیقی دارند— بوده‌است. مانگودی‌بی برای رفع مشکلاتی طراحی شده که با پایگاه داده‌های رابطه‌ای به سادگی رفع نمی‌شوند؛ برای مثال اگر پایگاه داده کارسازهای زیادی را دربرگیرد.

پیشنهاد می شود اگر کاربر تازه وارد هستید نحوه نصب دیتابیس MongoDB را در peedes.com دنبال کنید.

حال از آنجایی که در حال نوشتن برنامه در Node هستیم، می بایست درایور MongoDB را از طریق npm نصب کنیم:

وقتی نصب کردید، از طریق متد Mongo.Client می توانیم به دیتابیس متصل شویم:

توجه داشته باشید که در متغیر url آدرس دیتابیس را مشخص کرده ایم. bookmarker نام دیتابیس ماست.

در مرحله بعدی می خواهیم سرور ما وقتی اجرا شود که دیتابیس با موفقیت متصل شده است!

برای این کار app.listen را به داخلی متد connect منتقل کنید:

ما همچنین متغیر db را تعریف کرده ایم تا از طریق آن از هر جای برنامه به دیتابیس دسترسی داشته باشیم.

تا اینجا تنظیمات MongoDB را به اتمام رساندیم، اجازه دهید کالکشن bookmark را برای ذخیره نام/آدرس لینک ها ایجاد کنیم.

collection نام آدرسی است که داده ها در آن ذخیره می شوند. به عنوان مثال می توانید کالکشن های متعددی درست کنید و نام های دلخواهی مثل products، quotes به آنها اختصاص دهید.

در این برنامه نام کالکشن ما bookmark است و از طریق متد ()db.collection قابل فراخوانی است. ما همچنین با متد save می توانیم داد ها را در MongoDB ذخیره کنیم.

وقتی عملیات ذخیره شدن با موفقیت انجام شد کاربر را با متد redirect به آدرس دیگری منتقل می کنیم. در برنامه ما کاربر به آدرس / منتقل می شود.

حال اگر درون <form> چیزی وارد کنید، به صورت زیر هماره با یک id منحصر به فرد در دیتایس ذخیره خواهد شد.

آموزش node.js

عالیست! تا اینجا توانستیم تعدادی لینک را به collection اضافه کنیم. حال چرا این داده ها را هنگامی که کاربر به صفحه ما مراجعه می کند نشان داده نشود؟


نمایش لیست لینک ها به کاربر

در این مرحله دو چیز را باید انجام دهیم.

  1. بازیابی اطلاعات از MongoDB
  2. نمایش اطلاعات از طریق یک Template Engine مثل EJS

از طریق متد find به داده های collection دسترسی داریم:

متد find یک شی بر میگرداند که اگر آن را با console.log چاپ کنید در خروجی اطلاعات زیادی چاپ می شود که به درد ما نمی خورد.

tutorial nodejs

اما ناراحت نشوید، خبر خوب این است که شی cursor شامل تمام متدها و مشخصه هایی است که به ما این اجازه را می دهد که دادهای مورد نظر خود را بازیابی کنیم. یکی از این متدها متد toArray است.

طراحی سایت با node.js

خیلی خوب حال شما آرایه ای از داده ها را در کنسول مشاهده می کنید (در حال حاظر تنها یک لینک در آرایه موجود است). در مرحله بعدی HTML لیست لینک های ما را تولید خواهد کرد.

فایل index.html که قبلا ایجاد کرده بودیم توانایی این را ندارد که لینک های ما را نمایش دهد، به این خاطر راهی برای اضافه کردن محتوا بصورت پویا وجود ندارد. راه حل استفاده از Template Engine است. برخی از تمپلیت انجین های معروف JadeEmbedded JavaScript و Nunjucks است.

در این آموزش از Embedded JavaScript (EJS) استفاده می کنیم به این خاطر که سینتکس ساده ای دارد.

ابتدا از طریق دستور زیر ejs را نصب کنید و view engine را در Express بر روی ejs تنظیم کنید.

وقتی view engine را تنظیم کردیم می توانیم از شی render در شی response برای رندر کردن لینک ها استفاده کنیم. برای این کار از الگو زیر استفاده می کنیم:

پارامتر اول views نام فایلی است که رندر خواهد شد. این فایل باید در پوشه views قرار گیرد.

پارامتر دوم locals شی است که داده ها را به view پاس می دهد.

ابتدا فایل index.ejs را در پوشه views ایجاد کنید:

حال کدهای زیر را به index.ejs اضافه کنید:

همانطور که مشاهده می کنید سینتکس EJS بسیار آسان و آشنا است، تنها کافیست جاوا اسکریپت را درون تگ های <% %> بنویسید. همچنین برای چاپ خروجی، از تگ های <% =%> استفاده کنید.

در مثال فوق می بینید که از طریق یک حلقه for آرایه bookmarkers را چاپ می کنیم.

فایل index.ejs بصورت زیر باید باشد:

در آخر فایل index.ejs از طریق یک درخواست GET قابل رندر است:

تا اینجا باید فایل app.js بصورت زیر باشد:

حال مرورگر را رفرش کنید و بوکمارک های خود را که وارد کرده اید را در صفحه مشاهده کنید:

ساخت برنامه با node.js


خلاصه

در این سری از آموزش Node.js یاد خواهیم گرفت که چطور:

  • سرور Express درست کنیم
  • عملیات Create و READ انجام دهیم
  • چطور داده در MongoDB ذخیره کنیم
  • چطور از Template Engine استفاده کنیم

اگر آموزش مفید واقع شده است خوشحال می شوم در نظرات آن را بیان کنید.


  • ایمان

    سلام یک دسته بندی واسه مطالبتون بزارین خب

    • پاتریک درآواکیانس

      سلام، داخل منو دسته داره! فقط ترتیب پست ها یکم مرتب نیست 🙂

  • محمد فلاح

    سلام سایت خیلی جالبیارید مطالب هم خیلی آموزنده و سرگرم کننده هستند (البته خیلی عجیب و خوب هست که خسته کننده نیستند:d)

    سوالی دارم درمورد قالب سایتتون. این سبک طراحی رو چی میگن بهش؟ اسم خاصی داره یا همون مینیمالیستی میگن؟

    • محمد فلاح

      آها یک چیز دیگه اینکه با چه فریم ورکی طراحی شده؟ بوت استرپ یا فاندیشن یا …؟

      • پاتریک درآواکیانس

        بوت استرپ

    • پاتریک درآواکیانس

      مرسی دوست عزیر لطف دارید. خوشحالم 🙂
      اسم خاصی نداره. سلیقه ای.

  • adc

    سلام و ممنون از سایتتون
    یکم نوشته هاتون درهم بر همه !
    منوی کنار سایتو دیدم .
    خوبه که اموزش های نودتون رو که زیادم هستن یکم مرتب کنید یا حداقل در یک صفحه لینک همه ی اموزش هارو بذارید
    خواهش می کنم هرچه زود تر به این موضوع رسیدگی کنید!
    با سپاس