دریافت مقدار انتخاب شده select

برای یکی از پروژه هایی که قبلا توسعه می‌دادم نیاز به ساخت یک فیلتر آجاکسی بر روی لیستی از دیتاها بود که وقتی کاربر بر روی select کلیک میکرد مقدار موردنظر با آجاکس ارسال و جستجو انجام میشد در واقع بروزرسانی مقادیر تگ select باید انجام می‌شد.

select2 plugin

$('select.selectronFilter').on('change', function(){
    var selected    = $(this).find("option:selected").val();
});

ادامه خواندن دریافت مقدار انتخاب شده select

آرشیو دوم : دستورات و نکات مهم لاراول

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

۱ – تفاوت بین PUT و PATCH  در فرم‌های لاراول :

وقتی یک فرم با متد post ارسال می‌شود یک resource  در سرور ایجاد می‌شود. اگر کاربر درخواست مشابهی رو دوبار وارد کند برای درخواست دوم resource جدید ایجاد می‌شود. در واقع ارسال فرم با متد post همان INSERT یک رکورد در دیتابیس است.

http post method is like a INSERT query in SQL which always creates a new record in database.

برای مثال ثبت یک مطلب، کاربر و سفارش در وبسایت همگی با متد post انجام می‌شود.

put و patch درخواست های http هستند که هر دوی آنها اطلاعات را بروزرسانی می‌کنند. ادامه خواندن آرشیو دوم : دستورات و نکات مهم لاراول

ساخت Helper کاستوم در لاراول

وقتی پروژه ای را پیاده سازی می‌کنیم بعد از پیاده سازی ساختار پروژه، به فایلهایی همچون config فکر می‌کنیم که در تمام بخش‌های پروژه فراخوانی شود و فایلی رو داشته باشیم که قبل از نمایش صفحه فانکشن‌هایی برای آن پروژه اجرا شود.

اخیرا در پروژه ای که با لاراول پیاده سازی شده بود، نیاز داشتم که یک فانکشن در تمام بخش‌های پنل کاربری اجرا شود. برای اینکار نیاز به یک فایل به نام Helper داشتم که قبل از اجرای صفحه لود شود و موارد موردنیازم را بررسی و اجرا نماید. پس فایل کاستوم Helper را ایجاد کردم. ادامه خواندن ساخت Helper کاستوم در لاراول

ابزارهایی برای تحلیل و دیاگرام دیتابیس

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

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

۱. SQL Database Modeler

SQL Database Modeler

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

model database

در نهایت بعد از ایجاد دیاگرام دیتابیس میتوانید از منوی سمت پایین گزینه Forward Engineer – Generate SQL را بزنید تا دیتابیس مورد نظر را اکسپورت کنید و در پروژه خود استفاده کنید. محدودیتی که این وبسایت دارد این است که فقط Microsoft SQL Server  و  MySql  را پشتیبانی می‌کند.

۲. MySQL Workbench

MySql

یکی از ابزارهای بسیار قدرتمند برای دیتابیس‌های MySql است که از طریق وب‌سایت رسمی mysql.com می‌توانید به صورت رایگان آن را دانلود نمائید. ( نسخه Enterprise هم دارد که امکانات بیشتری را در اختیارمون قرار میدهد. )

با استفاده از این ابزار بعد از اینکه کانکشن لازم را ایجاد کردیم، از قسمت Files > New Model  میتوانیم مدل دیتابیس موردنیاز پروژه را ایجاد کنیم و بعد از وارد کردن نام دیتابیس بر روی گزینه Add diagram کلیک میکنیم تا به محیط ایجاد دیاگرام جداول دیتابیس هدایت شویم.

MySql Workbench

بعد از ایجاد دیاگرام جداول و مشخص نمودن ارتباط جداول کافی است تا از قسمت Database گزینه Forward Engineer را انتخاب می‌کنیم تا دیتابیس ما طبق دیاگرام مورد نظر ساخته شود و میتوانیم از طریق همین محیط و یا محیط phpmyadmin به آن دسترسی داشته باشیم و جداول را مشاهده کنیم.

ویدئوهای آموزشی نصب و کار با Mysql Workbench :

Create MySQL Database – MySQL Workbench Tutorial

MySQL Workbench Tutorial

Introduction to MySQL Workbench

۳. Navicat

Navicat

یکی دیگر از ابزارهای بسیار قدرتمندی که میخواهم بهش اشاره کنم، Navicat است که متاسفانه رایگان نیست. علاوه بر MySql سایر دیتابیس‌ها را نیز پشتیانی می‌کند. به راحتی می‌توانید دیاگرام یا مدل دیتابیس پروژه موردنظرتان را ایجاد کنید.

Navicat

یکی از قابلیت‌های فوق‌ العاده این ابزار ارائه مدل مفهومی دیتابیس است که به درک ساختار پروژه بسیار کمک می‌کند. این مدل علاوه بر اینکه برای متخصص و برنامه نویس قابل درکه برای مالک پروژه که دانش فنی نداشته باشد نیز قابل درک است و این می‌تواند یک زبان مشترک بین متخصص و کارفرما برای پیشبرد بهتر پروژه باشد.

conceptual modeling db

در صورتیکه با زبان‌های مدلسازی بصری همچون UML آشنایی داشته باشید این ابزار این قسمت را نیز پشتیبانی می‌کند.

Design data model database

مشاهده ویدئوهای آموزشی Navicat

طراحی ریسپانسیو ( Responsive ) از ایده تا اجرا !

با شنیدن نام ریپسپانسیو ( responsive ) یا واکنش گرا این تصویر برای ما تداعی میشود که وب سایتی که واکنش‌گراست از طریق موبایل و سایر دیوایس‌ها در دسترس است، ولی واقعا چند درصد از این وب سایتهای ریسپانسیو قابل استفاده هستند؟!

یکی از مشکلات عمده اشخاصی که در حوزه UI/UX و فرانت‌اند کار می‌کنند پیاده سازی وبسایتی ریسپانسیو و کارا مطابق نظر مشتری یا صاحب پروژه است که با وجود عدم آشنایی با این مفهوم قصد دارد همه موارد داخل وبسایت که از طریق دسکتاپ قابل دسترس است روی موبایل و تبلت هم وجود داشته باشد!

قبلا در مقاله نوشته بودم که همیشه حق با مشتری نیست!

نکته : پروژه‌ای که ما برای کارفرما پیاده‌سازی می‌کنیم قطعا باید مورد پسند کارفرما باشد ولی این به این معنا نیست که هر چیزی که کارفرما درخواست داشت درست است، باید این اعتماد را ایجاد کنیم که کاری که انجام می‌شود بر اساس تجربه و دانشی است که در نهایت به نفع کارفرما تمام می‌شود و رابطه‌ی کاری برد-برد را مدنظر داریم در واقع این هنر توسعه دهنده است که چطور کارفرما را قانع کند.

پرسش و پاسخ برای درک یک واقعیت!

بیایید با طرح دو سوال به سبکی بهتر به موضوع بپردازیم :

  • چرا هنگام چک کردن و یا انتقال وجه از حساب بانکی خود از  وب‌سایت اصلی بانک موردنظر استفاده نمی کنید؟
  • چرا اپلیکیشن بانک مورد نظر را دانلود و از آن برای بررسی موجودی و …. استفاده می‌کنید؟

پاسخ ۱ : به این‌خاطر که فقط اطلاعات کاربردی و موردنیاز نمایش داده میشود و کار کردن با آن بسیار راحتتر از وب سایت برروی موبایل است.

پاسخ ۲ : به این خاطر که وب‌سایت فونت ریزی داره و اطلاعات اضافی زیادی وجود دارد.

پاسخ ۳ : سرعت بارگذاری پایین است، امکان انتخاب منو‌ها و آیتم‌ها سخت است و….

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

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

یک سوال که اینجا مطرح می‌شود این است که این نیاز کاربران را از کجا تشخیص دهیم؟

 

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

در واقع ما وب‌سایت و پروژه را باید برای مشتری طراحی کنیم نه کارفرما! چونکه مشتری کارفرما رو به هدفی که می‌خواهد می‌رساند که این هدف می‌تواند پول و درآمد بیشتر باشد.

برای مثال یکی از دوستان من که در یکی از شرکت‌های بزرگ فروشگاهی فعالیت داشت، اظهار داشت که فروش محصولات فروشگاهی نسبت به بازدید صفحات محصول کمتر از مقدار مورد انتظار بود. بعد از تحلیل و بررسی رفتار کاربران و تغییر رنگ دکمه خرید و مکان دکمه خرید فروش محصولات را به میزان ۲۰ درصد افزایش دادند و این یعنی موفقیت در پروژه.

در نهایت لازم است تاکید کنم راه تشخیص اینکه کدام مورد بهتر و بهینه‌تر است تست و تحلیل نتایج است، یکی از راههایی که خیلی میتواند کمک کند A/B Testing است که مثلا به صورت رندم برای برخی کاربران استایل به یک سبکی نمایش داده شود و نتایج بررسی شود. این مورد مخصوصا در ایمیل مارکتینگ بسیار کاربردی و تاثیرگذار است که با استفاده از ابزارهایی همچون میل چیمپ و میلرلایت و … میتوان این موارد را تست کرد.

معرفی ابزارهایی برای آنالیز و تحلیل وب‌سایت و رفتار کاربران :

شما می‌توانید از ابزارهایی که وب‌سایت‌های زیر ارائه می‌دهند استفاده نمائید تا روند بهبود و رشد وب‌سایت خود را فرآهم کنید.

۱. گوگل آنالیتیک –  Google Analytics

۲. هات‌جار – Hotjar

۳. کریزی اِگ – Crazy Egg

در صورت تمایل می‌توانید کلمه Heat Map را در گوگل جستجو نمائید تا در رابطه با این موارد بیشتر مطالعه کنید.

 

نمایش لیستی از مکان‌‌ها بر روی نقشه و نمایش اطلاعات آنها

توی یکی از کارهایی که انجام می‌دادم نیاز شد که لیستی از مکانهای انتخابی ادمین سایت را روی نقشه نمایش دهم ( نمایش لیست مکان‌ها بر روی گوگل مپ ) به طوری که اگر کاربر روی یکی از اون موارد کلیک کرد اطلاعاتی از ان مکان را نمایش دهد از طرف دیگر لیستی از اون مکانها علاوه بر اینکه باید روی نقشه باشد باید در کنار نقشه نمایش داده شود :/

قبلا در رابطه با سفارشی کردن نقشه گوگل مپ مطلبی نوشته بودم که اگر فقط به این مورد نیاز دارید اون مطلب رو مطالعه کنید کافیه، ولی اگر مواردی که بالاتر اشاره کردم براتون جذابه ادامه مطلب رو بخونید 🙂

با استفاده از گوگل عزیز گشت و گذاری داشتم و مطالب زیادی رو پیدا کردم که کاربران نمونه کدها رو توی JSFiddle گذاشته بودند :

همه این موارد کاربرد خودشون رو دارند و از مورد اول میشه برای چیزی که مد نظر دارم استفاده کنم، اما پلاگینی نظرم رو به خودش جلب کرد که ترجیح دادم از اون استفاده کنم.

پلاگین MAPBOX :

MAPBOX Plugin

Mapbox is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create.

We’re changing the way people move around cities and explore our world. Through the apps Mapbox powers, we reach more than 300 million people each month.

برای استفاده از این نقشه ابتدا باید توی وبسایت ثبت نام کنید و بعد Accrss Token  رو دریافت کنید تا بتونید توی پروژه از آن استفاده کنید.

ویژگی فوق العاده ای که داره می‌تونیم نقشه رو برای پروژه روی دیوایس‌های مختلف هم اینتگریت کنیم :

mapbox

قابلیت جالبی که داره می‌توانیم نقشه موردنظرمون رو به سبکی که دوست داریم دیزاین کنیم و کافیه توی کدها مسیر دیزاین مورد نظر را قرار دهیم تا از این دیزاین استفاده کنه.

design mapbox

همچنین میتوانید آمار بازدید نقشه‌هایی که ایجاد می‌کنید را مشاهده کنید.

mapbox statistics

استفاده از MapBox :

برای استفاده از این پلاگین مطابق مراحل این لینک پیش برید.

پس از قرار دادن کدهای کتابخانه mapbox از طریق کد زیر در صفحه پروژه میتونید نقشه mapbox رو فعال کنید.

mapboxgl.accessToken = 'کد توکن را اینجا قرار دهید.';
// This adds the map to your page
var map = new mapboxgl.Map({
  // container id specified in the HTML
  container: 'map',
  // style URL
  style: 'mapbox://styles/mapbox/light-v9',
  // initial position in [lon, lat] format
  center: [-77.034084, 38.909671],
  // initial zoom
  zoom: 14
});

نمایش لیست مکان‌ها :

برای نمایش لیست مکان‌ها به یک لیست با فرمت JSON نیاز داریم که داخل متغیری قرار گیرد تا این مقادیر را توی لایه قرار دهیم که روی نقشه قرار گیرند.

متغیری به نام stores تعریف میکنیم و لیست داده ها را داخل آن قرار میدهیم. ساختار آن به صورت تصویر زیر است که داخل لینکی که بالاتر قراردادم میتوانید لیست این داده ها را دانلود کنید و تست کنید.

JSON data list

بعد از تعریف متغیر و قرار دادن اطلاعات مکان‌ها با استفاده از کد زیر آنها را روی نقشه نمایش می‌دهیم.

map.on('load', function(e) {
  // Add the data to your map as a layer
  map.addLayer({
    id: 'locations',
    type: 'symbol',
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: 'geojson',
      data: stores
    },
    layout: {
      'icon-image': 'restaurant-15',
      'icon-allow-overlap': true,
    }
  });
});

در صورتیکه تا اینجا قدم به قدم انجام داده باشید همچین دمویی دارید. دمو اولیه نقشه

first demo mapbox

قرار دادن لیست مکان‌ها در کنار نقشه :

در سایدبار کناری تگی با آی‌دی موردنظرمون ( listings ) قرار میدهیم. یعنی ساختار کدهای من تا به اینجای کار به صورت زیر است :

structure html code mapbox

تابع جاوااسکریپت زیر برای ایجاد لیست مکان‌ها را به کدهای اسکریپتی که نوشتیم اضافه میکنیم.

function buildLocationList(data) {
  // Iterate through the list of stores
  for (i = 0; i < data.features.length; i++) {
    var currentFeature = data.features[i];
    // Shorten data.feature.properties to just `prop` so we're not
    // writing this long form over and over again.
    var prop = currentFeature.properties;
    // Select the listing container in the HTML and append a div
    // with the class 'item' for each store
    var listings = document.getElementById('listings');
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = 'listing-' + i;

    // Create a new link with the class 'title' for each store
    // and fill it with the store address
    var link = listing.appendChild(document.createElement('a'));
    link.href = '#';
    link.className = 'title';
    link.dataPosition = i;
    link.innerHTML = prop.address;

    // Create a new div with the class 'details' for each store
    // and fill it with the city and phone number
    var details = listing.appendChild(document.createElement('div'));
    details.innerHTML = prop.city;
    if (prop.phone) {
      details.innerHTML += ' · ' + prop.phoneFormatted;
    }
  }
}

در واقع این فانکشن یک مقداری دریافت میکنه و با توجه به اون مقدار لیستی ایجاد میکنه و به تگ لیست ما اضافه میکنه. اگر متغیر stores رو یادتون باشه که داده‌ها رو به صورت JSON ذخیره کرده بود را باید به این فانکشن پاس بدیم. کافیه در کدهایی که ما لایه را ایجاد کردیم ( addLayer ) بعد از آن فانکشن را فراخوانی و مقدار sores را بهش پاس بدیم.

buildLocationList(stores);

تا به اینجای کار میتوانید دموی مورد نظرتون رو مشاهده کنید.

third demo mapbox - display list locations

نقشه را جذابتر و قابل تعاملتر کنیم!

کاری که میخواهیم انجام دهیم به این صورت است که وقتی بر روی لیست کناری نقشه کلیک شد، نقشه آن مکان را با فوکوس روی آن نمایش دهد.

دو تابع برای قابل تعامل کردن نقشه :

با کلیک کاربر بر روی لیست کنار نقشه ابتدا نقشه به مکان درست هدایت می‌شود و سپس یک پاپ آپ برای نمایش اطلاعات آن مکان نمایش داده می‌شود. هر دو تابع وقتی که کاربر بر روی یکی از مکانها کلیک میکند اجرا می‌شود.

function flyToStore(currentFeature) {
  map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });
}
function createPopUp(currentFeature) {
  var popUps = document.getElementsByClassName('mapboxgl-popup');
  // Check if there is already a popup on the map and if so, remove it
  if (popUps[0]) popUps[0].remove();
  var popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML('<h3>Sweetgreen</h3>' +
'<h4>' + currentFeature.properties.address + '</h4>')
 .addTo(map);
}

میتوانید به پاپ‌آپی که بر روی نقشه نمایش داده می‌شود استایل دهید. بر روی این لینک کلیک کنید تا کدهای آن را مشاهده نمائید.

برای اینکه نقشه به درستی روی مرورگرهای قدیمی نیز کار کنه لازمه کد زیر رو در ابتدای اسکریپت اضافه کنید تا تابع remove() به درستی کار کند.

// This will let you use the .remove() function later on
if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

نکته  :  توابعی که تا اینجا معرفی شدند برای اینکه متغیرهای map, link شناسایی شوند باید داخل تابع buildLocationList که بالاتر این تابع رو اضافه کرده بودیم اضافه شوند.

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

وقتی که روی لینک سایدبار کلیک می‌شود :

// Add an event listener for the links in the sidebar listing
link.addEventListener('click', function(e) {
  // Update the currentFeature to the store associated with the clicked link
  var clickedListing = data.features[this.dataPosition];
  // ۱. Fly to the point associated with the clicked link
  flyToStore(clickedListing);
  // ۲. Close all other popups and display popup for clicked store
  createPopUp(clickedListing);
  // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
  var activeItem = document.getElementsByClassName('active');
  if (activeItem[0]) {
    activeItem[0].classList.remove('active');
  }
  this.parentNode.classList.add('active');
});

وقتی روی آیکون روی نقشه کلیک می‌شود :

// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
  // Query all the rendered points in the view
  var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
  if (features.length) {
    var clickedPoint = features[0];
    // ۱. Fly to the point
    flyToStore(clickedPoint);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedPoint);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
      activeItem[0].classList.remove('active');
    }
    // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
    var selectedFeature = clickedPoint.properties.address;

    for (var i = 0; i < stores.features.length; i++) {
      if (stores.features[i].properties.address === selectedFeature) {
        selectedFeatureIndex = i;
      }
    }
    // Select the correct list item using the found index and add the active class
    var listing = document.getElementById('listing-' + selectedFeatureIndex);
    listing.classList.add('active');
  }
});

نکته  :  addEventListenerی که خود داکیومنت سایت mapbox نوشته بود درست کار نمیکرد و با توجه به اینکه من توی پروژه از jQuery  استفاده کرده بودم به صورت زیر وقتی روی لینک کلیک میشود تابع را فراخوانی میکنم.

$('.item > a').on('click',function(){
                        
    // Update the currentFeature to the store associated with the clicked link
    var clickedListing = data.features[this.dataPosition];
    // ۱. Fly to the point associated with the clicked link
    flyToStore(clickedListing);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedListing);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
        activeItem[0].classList.remove('active');
    }
    this.parentNode.classList.add('active');
    
});

سفارش کردن نهایی و تغییر مارکر ( آیکون روی نقشه ) :

تاکنون ما بر اساس استایلهایی که داشتیم و فانکشن‌هایی که معرفی کردیم نقشه را ایجاد کردیم و تمام بخش های آن واضح و روشن است. اکنون برای اینکه ما مارکر سفارشی خود را قرار دهیم. لازم است تغییراتی در کدهای بالا ایجاد کنیم.

اولین مورد باید لایه ای که در ابتدا ساختیم ( map.addLayer ) و مارکر را مشخص کردیم حذف کنیم و کد زیر را جایگزین کنیم.

  // This adds the data to the map
 map.on('load', function (e) {
 // This is where your '.addLayer()' used to be, instead add only the source without styling a layer
 map.addSource("places", {
 "type": "geojson",
 "data": stores
 });
 // Initialize the list
 buildLocationList(stores);
 });

همچنین EventListenerهایی که برای دو فانکشن نوشتیم را حذف میکنیم و با استفاده از آبجکت mapboxgl.Marker() کار را انجام می‌دهیم. داخل کد جدیدی که مینویسیم کلاس marker به آن اختصاص میدهیم پس به کدهای css خود کد زیر را اضافه میکنیم و آدرس مارکر موردنظرمون رو مشخص میکنیم.

.marker {
  border: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  background-image: url(marker.png);
  background-color: rgba(0, 0, 0, 0);
}

در نهایت کد زیر را اضافه میکنیم  که Event Listner جدید را نیز در آن قرار داده ایم :

  // This is where your interactions with the symbol layer used to be
  // Now you have interactions with DOM markers instead
  stores.features.forEach(function(marker, i) {
      // Create an img element for the marker
      var el = document.createElement('div');
      el.id  = "marker-" + i;
      el.className = 'marker';
      // Add markers to the map at all points
      new mapboxgl.Marker(el, {offset: [0, -23]})
          .setLngLat(marker.geometry.coordinates)
          .addTo(map);

      el.addEventListener('click', function(e){
          // ۱. Fly to the point
          flyToStore(marker);

          // ۲. Close all other popups and display popup for clicked store
          createPopUp(marker);

          // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
          var activeItem = document.getElementsByClassName('active');

          e.stopPropagation();
          if (activeItem[0]) {
              activeItem[0].classList.remove('active');
          }

          var listing = document.getElementById('listing-' + i);
          listing.classList.add('active');
      });

  });

مشاهده دموی نهایی نقشه mapbox.

شما میتوانید آخرین ادیت کدهای اسکریپت فوق ( بخش آخر سفارشی شده ) را دانلود و بررسی کنید.

در نهایت من کدهای بالا را بر اساس نیاز خودم تغییر دادم و به تصویر زیر رسیدم، تغییراتی که ایجاد کردم به این صورت بود که با کلیک بر روی هر کدام از مکان ها علاوه بر نمایش اطلاعات، اطلاعات آن لیست در بالاترین قسمت لیست قرار داده میشود.

custom mapbox demo

شما می‌توانید روی گیت‌هاب من دموی کامل را مشاهده نمائید.

در نهایت لینک‌های زیر را برای استفاده بیشتر و مطالعه پیشنهاد میکنم:

 

ساختار کلی یک پروژه php

وقتی پروژه ای رو با php خام بدون هیچ فریمورکی ایجاد می‌کنیم قطعا باید ساختاری رو برای آن در نظر بگیریم که بتوان بعدها به راحتی به بخش‌های مختلف دسترسی داشت و برای توسعه آن هم راحتتر اقدام کنیم.

فایل‌های مختلفی همچون config.php , functions.php , actions.php , … را بر اساس سلیقه های شخصی می‌توان ساخت.

ساختاری که بسیاری از پروژه‌ها و فریمورک‌های معروف از آن استفاده می‌کنند ساختار MVC است که بر اساس Model , View , Controller این ساختار تعریف شده است. در مقاله ای دیگر در این رابطه خواهم نوشت ولی فعلا تا حد امکان سعی میکنم ساختار منظمی برای پروژه تعریف کنم و با شما به اشتراک بذارم.

مواردی که برای یک پروژه که با php خام ایجاد می‌شود را برای خودم توی این مقاله ذخیره میکنم.

فایل config پروژه :

فایلی را برای کانفیگ و تنظیمات کل پروژه در نظر می‌گیریم که در تمام بخش های پروژه در دسترس است.

۱ – ذخیره اطلاعات عمومی کل پروژه

اولین مورد ذخیره تمام اطلاعات کلی پروژه است که قرار است در کل پروژه استفاده شود. برای مثال نام کامل پروژه، آدرس دامنه وبسایت، تعداد مطالب/مقالات منتشر شده در هر صفحه و ….که من به صورت زیر این موارد را تعریف میکنم.

define('project_name', 'نام پروژه');
define('project_url', 'http://mekaeil.me'); 
...

۲ – مشخصات اکانت ادمین ( اختیاری )

برای هر پروژه معمولا یک مدیرکل وجود دارد که به همه بخش‌های وب‌سایت دارد. این نقش باید هنگام راه اندازی پروژه به صورت اتوماتیک ایجاد و در دیتابیس ثبت شود.

define('admin_username','mekaeil.me')
define('admin_email','[email protected]')

۳ –  فعال کردن نمایش خطاهای برنامه نویسی

قطعا در هنگام پیاده سازی پروژه نیاز داریم که خطاهایی که هنگام پیاده سازی و برنامه نویسی پروژه انجام می‌دهیم به ما نمایش داده شود. پس در ابتدای کار حتما این خطاها را نمایش می‌دهیم.

ini_set('display_errors','on');
error_reporting(E_ALL);

نکته مهم : هنگام اتمام پروژه و راه اندازی این موارد باید غیرفعال شوند.

۴ – اتصال به دیتابیس

برای دسترسی به دیتابیس لازم است اطلاعات اتصال به دیتابیس را در بخشی از پروژه قرار دهیم که بهترین بخش برای قراردادن این اطلاعات فایل config پروژه است.

$db_host = 'localhost';
$db_user = 'user_project';
$db_password = 'database password';
$db_name = 'database name';

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

همچنین اتصال دیتابیس را چک کنیم که در صورتی‌که به هر دلیلی دیتابیس وصل نبود پروژه نمایش داده نشود.

$db = new mysqli($db_host,$db_user,$db_password,$db_name);

// checking connection Database
if ( $db->connect_errno ) {
	print_r("connection Faild : ", $db->connect_error );
	exit();
}

۵ –  تنظیم یونیکد برای حروف فارسی

برای ثبت و نمایش درست اطلاعات فارسی لازم است یونیکد پروژه را روی utf-8تنظیم کنیم که داده‌ها به درستی ذخیره و نمایش داده شوند.

$db->query('SET NAMES UTF8;');

۶ – تعریف جدول‌های دیتابیس

در طول پروژه لازم است که queryهایی نوشته و اجرا شوند که باید به جداول مختلف دیتابیس برای اجرای این queryها نیاز داریم. برای اینکه راحتتر بتوانیم به آنها دسترسی داشته باشیم آنها را در فایل کانفیگ ست میکنیم. همانطور که مشاهده میکنید برای جداول users و posts  من نام آنها را تعریف کردم.

( نکته :  $db در کدهای بالاتر فایل کانفیگ به دیتابیس متصل شده است.  )

$db->usersTable = "users";
$db->postsTable = "posts";

فایل کانفیگ میتواند به مرور بر اساس پروژه کاملتر شود، بعد از ساخت فایل cconfig.php در قسمت هدر پروژه که در تمام بخش‌های پروژه تعریف شده است این فایل را به صورت  include_once ‘config.php’ فراخوانی می‌کنید، از این پس در تمام بخش ها به محتواهای این فایل دسترسی دارید.

فایل توابع پروژه php :

همانطور که در ساختار پروژه فایلی برای تنظیمات کل پروژه داریم قطعا باید فایلی برای توابع پر کاربرد و مورد استفاده در طول پروژه داشته باشیم. برای مثال در سیستم مدیریت محتوای وردپرس فایلی به نام functions.php  در پروژه استفاده می‌شود که تمامی توابع مورد نیاز را در آن قرار می‌دهیم.

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

برای مثال توابعی همچون is_login , create_user , update_post  و … را می‌توان در این فایل تعریف کرد.

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

فایلی را با نامی دلخواه مثلا actions.php در نظر بگیریم که برای مقادیری که فرم‌ها ارسال می‌کنند مدیریت نماید. در واقع در این فایل چک می‌شود که آیا مقادیر این فرم ست شده است ( isset($_POST[‘input’]) ) که توابع داخل آن اجرا شود یا خیر.

بیشتر تعاملات کاربر با وب‌سایت معمولا از طریق فرم‌ها صورت میگیرد.

 

نکته ۱ : با توجه به اینکه تمام عملیات و کارهایی که انجام میدهیم نیاز به فایل actions دارند پس میتوانیم در قسمت head پروژه فایل actions  را include_once نمود و فایلهای config و functions  را در بالاترین  قسمت این فایل، به صورت include_once فراخوانی کنیم.

نکته ۲ : با توجه به موارد موفق تا به اینجای کار اگر بخواهیم مقایسه ای با ساختار MVC داشته باشیم، فایل functions.php که تعریف کردیم در واقع همان Model برای کار با دیتابیس، فایل actions.php همان Controller هستند و بخش View هم همانطور که می‌دانید بخش UI پروژه است.

نکته ۳ : با توجه به اینکه ما در پروژه خود از SESSION معمولا استفاده می‌کنیم پس لازم است در بالاترین قسمت فایل function حتما session_start() را قرار دهیم.

نکته ۴: می‌توان برای درخواست‌هایی که به صورت ‌Ajax ایجاد می‌شوند فایلی متمایز از actions را در نظر گرفت.

لازم است اشاره کنم در این مقاله به ساختار یک پروژه ساده بدون شی‌گرایی پرداختم که قطعا در حالت شی گرایی میتوان تغییرات زیادی اعمال کرد. در مقاله بعدی این مورد را بررسی میکنم.

ایمپورت / اکسپورت دیتابیس با command line

برای import یا export دیتابیس از دستورات زیر می توانیم توی command line استفاده کنیم.

ابتدا وارد مسیری که میخواهیم دیتابیس آنجا قرار گیرد ( معمولا دسکتاپ ) می شویم و سپس دستورات را اجرا میکنیم.

Export گرفتن از یک دیتابیس مشخص mysql :

mysqldump database_name > database_exportname.sql

database_name : نام دیتابیسی که داریم و می خواهیم آن را export  کنیم.

database_exportname : نامی که میخواهیم روی سیستم ذخیره کنیم.

نکته : برای اجرای دستور فوق احتمال بسیار زیاد خطای دسترسی داده شود که لازم است قبلش sudo  نوشته شود، به صورت زیر :

 sudo mysqldump database_name > database_exportname.sql

Import کردن یک دیتابیس مشخص mysql :

mysql database_name < database_exportname.sql

در صورتیکه یوزر دیتابیس شما پسورد داشته باشد و نیاز به دسترسی جهت ایمپورت داشته باشد به صورت زیر مینویسیم

mysql -u USER -p  database_name < database_exportname.sql

بعد از وارد کردن دستور فوق پسورد کاربر دیتابیس از شما درخواست می‌شود.

Export گرفتن از تمام دیتابیس‌های موجود mysql :

mysqldump --all-databases > all_databases_export.sql

در صورتی‌‌که ما exportی از همه دیتابیس‌ها داشته باشیم و بخواهیم از فایل export  شده فقط یکی از آن‌ها را import کنیم به صورت زیر اقدام میکنیم.

Import کردن یک دیتابیس mysql از لیست فایل export  شده همه دیتابیس‌ها :

mysql --one-database database_name < all_databases_export.sql
 psql -U USERNAME database_name < dbexport.pgsql

USERNAME : نام کاربری postgres

database_name :  نام دیتابیس ایجاد شده.

Export دیتابیس postgres :

pg_dump -U USERNAME database_name > dbexport.pgsql

postgres

ویدئوی آماده سازی ساختار فایلهای یک پروژه

در این ویدئوی آموزشی مقدمات استارت یک پروژه رو توضیح دادم که چگونه از css preprocessor برای توسعه وب سایت استفاده کنیم.

قبلا مقاله ای در این رابطه منتشر کردم : استفاده از css preprocessor برای توسعه وب سایت

فایلهای پروژه رو روی گیت‌هاب به اشتراک گذاشتم که هر سری که پروژه ی جدیدی تعریف میشود طبق این ساختار پروژه را انجام دهم و به مرور این ساختار رو تکمیل تر کنم که پروژه ها با ساختار بهتری توسعه پیدا کنند تا امکان توسعه، راحتتر امکان پذیر باشد.

فایل ها در گیت‌هاب

 

چگونه سیستم مدیریت محتوای (CMS) مناسب را انتخاب کنیم؟

سیستم های مدیریت محتوا (CMS) از زمان به وجود آمدن زبان های برنامه نویسی همچون PHP تبدیل به یکی از قدرتمندترین ابزارهای توسعه وب در اینترنت شده اند.

در بازاری که وب سایتها بایستی سریع تر و آسانتر ساخته شوند، بسیاری از توسعه دهندگان وب در حال روی آوردن به CMSهای منبع باز (open source) هستند تا کار خود را پیش ببرند. متاسفانه، امروزه هزاران CMS در حوزۀ وب وجود دارد و یافتن مورد مناسب به کاری دشوار تبدیل شده است.

در این مقاله به این موضوع خواهیم پرداخت که چگونه می توانید CMS مناسب خود را برای هر پروژه پیدا کنید.

سیستم محتوا CMS چیست؟

سیستم مدیریت محتوا (CMS) یک برنامه تحت وب است که از یک پایگاه داده (معمولاً MySQL) یا روش های دیگر برای ایجاد، ویرایش و ذخیره محتوای HTML به شکلی قابل کنترل استفاده می کند.

محتوا در قسمت مدیریت برنامه تحت وب ایجاد و ویرایش می شود. سپس، محتوای تولید شده بر روی سایت برای مشاهده بازدیدکنندگان قرار می گیرد.

چرا باید از CMS استفاده کرد؟

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

محتوا فقط شامل متن نمی شود. گاهی اوقات، محتوایی که شما در یک سایت نیاز دارید ممکن است فرم تماس یا سیستم احراز هویت کاربر باشد. هنر این است که یک CMS در عین داشتن قابلیت، استفاده از آن برای شما یا مشتریانتان آسان باشد. یک CMS خوب به شما امکان می دهد که زمان بیشتری را برای طراحی ظاهر وب سایت و سپس پیاده سازی برنامه های افزودنی (extensions و یا plugin ) یا قابلیت ها اختصاص دهید.

اشتباهات رایج در انتخاب سیستم های مدیریت محتوا

اشتباه اول : انتخاب یک CMS برای افراد ناشی

قبل از هر چیز، توسعه دهندگانی که برای مشتریان خود، وب سایت می سازند باید به خاطر داشته باشند که همه افراد به اندازه شما در زمینه تکنولوژی تخصص ندارند. حتی اگر یک CMS پیدا کرده اید که دوستش دارید و به خوبی جواب می دهد، این مسئله تنها در صورتی اهمیت دارد که سایت را برای خودتان طراحی کنید.

مهم ترین ویژگی در وب سایت آن است که ببینید آیا مشتری می‌تواند همانطور که انتظار دارد از سایت استفاده کند. بنابراین، در دراز مدت، اگر یک CMS با واسط مدیریتی (admin interface) ساده  انتخاب کنید و حتی اگر مجبور باشید آن را برای تطابق با نیازهای مشتری شخصی سازی کنید، برای سلامتی خودتان بهتر خواهد بود.

اشتباه دوم : کامیونیتی و ارتباطات هرچه بزرگتر، بهتر!

مراقب CMS هایی باشید (خواه متن باز و خواه غیره) که تعداد زیاد کاربرانشان را دلیلی برای ترغیب شما به استفاده از سیستم خود می دانند. فریب وعده وجود یک جامعه کاربری بزرگ و کمک کننده و برنامه های افزودنی یا افزونه های زیبا را نخورید. این یک تله است!

اینکه تعداد زیادی از افراد از یک CMS استفاده می کنند دلیلی بر خوب بودن آن نیست. انتخاب یک CMS صرفاً به خاطر سیل عظیم کاربرانش، یک اشتباه خیلی بزرگ است. برای مثال سیل عظیمی از کاربران از ووکامرس وردپرس برای فروشگاه استفاده میکنند آیا انتخاب این فروشگاه ساز، برای هر نوع فروشگاهی، واقعا کار درستی است؟

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

 اشتباه سوم : راه رفتن با یک کوتوله!

همواره مطمئن شوید که CMS انتخابی شما برنامه های افزودنی و قابلیت های مورد نیازتان را داراست. بسیاری از اوقات، ممکن است به یک CMS امیدوارکننده برخورد کنید اما تا موقعی که مطمئن نشده اید قابلیت های مورد نیازتان را دارد بر روی آن سرمایه گذاری نکنید. متاسفانه برخی از بهترین CMSهای موجود هنوز در حال توسعه هستند.

اشتباه چهارم : تحقیق نکردن

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

با این حال، زمانی فرا می رسد که باید مقداری زمان صرف کنید تا سیستم را تست کرده و یک سایت بسازید. قبل از اینکه قولِ استفاده از این سیستم را به مشتری بدهید، این کار را برای خودتان بکنید. گاهی، برنامه ای افزودنی یا ماژولی را پیدا می کنید که فکر می کنید به خوبی جواب می دهد اما پس از آزمایش آن متوجه می شود که عیب هایی اساسی دارد. گاهی اوقات نیز متوجه می شوید که باید برای داشتن یک ماژول مناسب پول خرج کرده و آن را بخرید.

در یک CMS باید به دنبال چه چیزی بود؟

می توان ویژگی های زیادی را در یک سیستم مدیریت محتوا جستجو کرد. در اینجا برخی از مهم ترینِ آن ها ذکر شده اند

  • نصب سریع و آسان
  • واسط مدیریتی(کاربری) ساده
  • توسعه سریع و آسان قابلیت های اضافی در CMS
  • دستکاری سادۀ قالب
  • جامعه کاربران کمک کننده
  • مستندات مناسب

شاید این برخلاف انتظار باشد، اما شما باید به دنبال یک CMS باشید که بهترین جذابیت طراحی را برای شما دارد. داشتن یک طراحی جذاب یکی از بهترین شاخص هایی است که نشان می دهد واسط کاربرپسند است.

اما همواره به یاد داشته باشید که باید قبل از صرف وقت و انرژی بر روی یک سیستم در مورد آن تحقیق کنید.

توسعه سیستم های مدیریت محتوای منبع باز با سرعتی فزاینده در حال وقوع است. به طور پیوسته، سیستم های تازه ای پا به عرصۀ ظهور می گذارند و بسیاری از این سیستم ها امیدوارکننده به نظر می رسند. غول های دنیای CMS مانند WordPress ، Joomla و Drupal هر روز در حال تغییر و بروزرسانی هستند و با تغییرات زیادی که اعمال می شود روز به روز کاربرپسندتر می شوند.

نتیجه گیری :

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

هرگز تجربۀ کاربر را فدای قابلیت نکنید. این موارد در بازاریابی اینترنتی از اهمیت ویژه ای برخوردار است. موارد عنوان شده را به خاطر داشته باشید تا تجربۀ بهتری در کار با سیستم های مدیریت محتوا داشته باشید.

پی نوشت :‌

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