سلام دوستان
در این آموزش من با استفاده از Select2 و Ajax در لاراول سعی می کنم مراحل ساخت یک Autocomplete را به شما آموزش بدم. این اموزش رو با یک مثال کاربردی پیش می بریم امیدوارم بتونه براتون مفید واقع بشه.

مرحله اول: نصب لاراول

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

[pastacode lang=”php” manual=”composer%20create-project%20–prefer-dist%20laravel%2Flaravel%20blog%0A” message=”” highlight=”” provider=”manual”/]

مرحله دوم: Database Configuration

در این مرحله اطلاعات اتصال به پایگاه داده را در فایل .env قرار می دهیم.

[pastacode lang=”php” manual=”DB_HOST%3Dlocalhost%0ADB_DATABASE%3Dhomestead%0ADB_USERNAME%3Dhomestead%0ADB_PASSWORD%3Dsecret” message=”.env” highlight=”” provider=”manual”/]

مرحله سوم: ساخت Migration

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

[pastacode lang=”php” manual=”php%20artisan%20make%3Amigration%20create_products_table%20–create%3Dproducts%0A%0A” message=”” highlight=”” provider=”manual”/]

بعد از اجرای خط فرمان بالا یک فایل در مسیر database/migrations ایجاد می گردد آن را بصورت زیر تغییر دهید، تا استراکچر جدول products در پایگاه داده شما ایجاد گردد:

[pastacode lang=”php” manual=”%3C%3Fphp%0A%0Ause%20Illuminate%5CDatabase%5CMigrations%5CMigration%3B%0Ause%20Illuminate%5CDatabase%5CSchema%5CBlueprint%3B%0Ause%20Illuminate%5CSupport%5CFacades%5CSchema%3B%0A%0Aclass%20CreateProductsTable%20extends%20Migration%0A%7B%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Run%20the%20migrations.%0A%20%20%20%20%20*%0A%20%20%20%20%20*%20%40return%20void%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20up()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20Schema%3A%3Acreate(‘products’%2C%20function%20(Blueprint%20%24table)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24table-%3Eid()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24table-%3Estring(‘name’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24table-%3Einteger(‘price’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24table-%3Etimestamps()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Reverse%20the%20migrations.%0A%20%20%20%20%20*%0A%20%20%20%20%20*%20%40return%20void%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20down()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20Schema%3A%3AdropIfExists(‘products’)%3B%0A%20%20%20%20%7D%0A%7D” message=”” highlight=”” provider=”manual”/]

برای اجرا فایل مورد نظر و ایجاد جدول پایگاه داده دستور زیر را اجرا می کنیم:

[pastacode lang=”php” manual=”php%20artisan%20migrate%0A” message=”” highlight=”” provider=”manual”/]

بعد اجرا فرمان فوق جدول products در پایگاه داده ایجاد خواهد شد. سپس برای ایجاد model خط فرمان زیر را اجرا خواهیم نمود.

[pastacode lang=”php” manual=”php%20artisan%20make%3Amodel%20Product%20-m%0A” message=”” highlight=”” provider=”manual”/]

حال با اجرا خط فرمان بالا model ایجاد شده را بصورت زیر ویرایش می کنیم.

[pastacode lang=”php” manual=”%3C%3Fphp%0A%0Anamespace%20App%3B%0A%0Ause%20Illuminate%5CDatabase%5CEloquent%5CModel%3B%0A%0Aclass%20Product%20extends%20Model%0A%7B%0A%20%20%20%20%20protected%20%24fillable%20%3D%20%5B%0A%20%20%20%20%20%20%20%20’name’%2C%20’price’%2C%0A%20%20%20%20%5D%3B%0A%7D” message=”app/Product.php” highlight=”” provider=”manual”/]

مرحله چهارم: ایجاد Route

فایل routes/web.php بصورت زیر ویرایش می کنیم:

[pastacode lang=”php” manual=”Route%3A%3Aget(‘select2’%2C%20’Select2AutocompleteController%40index’)%3B%0ARoute%3A%3Aget(‘%2Fselect2-autocomplete-ajax’%2C%20’Select2AutocompleteController%40dataAjax’)%3B” message=”routes/web.php” highlight=”” provider=”manual”/]

مرحله پنجم: ایجاد Controller

برای ایجاد کنترلر Select2AutocompleteController از خط فرمان زیر استفاده می کنیم.

[pastacode lang=”php” manual=”php%20artisan%20make%3Acontroller%20Select2AutocompleteController%0A” message=”” highlight=”” provider=”manual”/]

در فایل کنترلر ایجاد شده ما تنها به دو متد زیر نیازمندیم برای راختی کار فایل نهایی را برای شما اماده و در زیر قرار می دهیم:

[pastacode lang=”php” manual=”%3C%3Fphp%0A%0Anamespace%20App%5CHttp%5CControllers%3B%0Ause%20Illuminate%5CHttp%5CRequest%3B%0Ause%20App%5CProduct%3B%0A%0Aclass%20Select2AutocompleteController%20extends%20Controller%0A%7B%0A%20%20%20%20%2F**%0A%20%20%20%20*%20Show%20the%20application%20layout.%0A%20%20%20%20*%0A%20%20%20%20*%20%40return%20%5CIlluminate%5CHttp%5CResponse%0A%20%20%20%20*%2F%0A%20%20%20%20public%20function%20index()%0A%20%20%20%20%7B%0A%20%20%20%20%09return%20view(‘select2.index’)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F**%0A%20%20%20%20*%20Show%20the%20application%20dataAjax.%0A%20%20%20%20*%0A%20%20%20%20*%20%40return%20%5CIlluminate%5CHttp%5CResponse%0A%20%20%20%20*%2F%0A%20%20%20%20public%20function%20dataAjax(Request%20%24request)%0A%20%20%20%20%7B%0A%20%20%20%20%09%24data%20%3D%20%5B%5D%3B%0A%0A%20%20%20%20%20%20%20%20if(%24request-%3Ehas(‘q’))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24search%20%3D%20%24request-%3Eq%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24data%20%3DProduct%3A%3Aselect(%22id%22%2C%22name%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%09%09-%3Ewhere(‘name’%2C’LIKE’%2C%22%25%24search%25%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%09%09-%3Eget()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20return%20response()-%3Ejson(%24data)%3B%0A%20%20%20%20%7D%0A%7D” message=”/app/Http/Controllers/Select2AutocompleteController.php” highlight=”” provider=”manual”/]

مرحله ششم: ایجاد View

در این مرحله فایل Blade مورد نظر را ایجاد می کنیم و آن را بصورت زیر در پروژه در مسیر resources/views/select2 بارگذاری می کنیم.

[pastacode lang=”php” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3ELaravel%20-%20Dynamic%20autocomplete%20search%20using%20select2%20JS%20Ajax-uclass.ir%3C%2Ftitle%3E%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ftwitter-bootstrap%2F5.0.0-alpha1%2Fcss%2Fbootstrap.min.css%22%3E%0A%20%20%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.js%22%3E%3C%2Fscript%3E%0A%20%20%3Clink%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fselect2%2F4.0.3%2Fcss%2Fselect2.min.css%22%20rel%3D%22stylesheet%22%20%2F%3E%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fselect2%2F4.0.3%2Fjs%2Fselect2.min.js%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%20class%3D%22bg-dark%22%3E%0A%3Cdiv%20class%3D%22container%20mt-4%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-md-8%20offset-md-2%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22card%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22card-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ch4%3ELaravel%20-%20Dynamic%20autocomplete%20search%20using%20select2%20JS%20Ajax%3C%2Fh4%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22card-body%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22col-md-12%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cselect%20class%3D%22itemName%20form-control%22%20name%3D%22itemName%22%3E%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(‘.itemName’).select2(%7B%0A%20%20placeholder%3A%20’Select%20an%20item’%2C%0A%20%20ajax%3A%20%7B%0A%20%20%20%20url%3A%20’%2Fselect2-autocomplete-ajax’%2C%0A%20%20%20%20dataType%3A%20’json’%2C%0A%20%20%20%20delay%3A%20250%2C%0A%20%20%20%20processResults%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20results%3A%20%20%24.map(data%2C%20function%20(item)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20item.name%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20item.id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20cache%3A%20true%0A%20%20%7D%0A%7D)%3B%0A%3C%2Fscript%3E%0A%3C%2Fhtml%3E” message=”resources/views/select2/index.blade.php” highlight=”” provider=”manual”/]

بسیار خوب کار در اینجا تمام است برای اجرا پروژه دستور زیر را اجرا می کنیم:

[pastacode lang=”php” manual=”php%20artisan%20serve” message=”” highlight=”” provider=”manual”/]

برای مشاهده پروژه از آدرس زیر استفاده می کنیم.

[pastacode lang=”php” manual=”http%3A%2F%2Flocalhost%3A8000%2Fselect2″ message=”” highlight=”” provider=”manual”/]

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

توسط رضا توتونچی
علاقه ام از سالها قبل برنامه نویسی تحت وب بوده و هست ، همیشه سعی می کنم علاقه مندی های خودم رو در ضمیه برنامه نویسی با همه به اشتراک بذارم، مطالب اینجا بتونه مشکل یه نفر رو هم برطرف کنه اون حس خوب رضایت رو در من بوجود میاره ;)

ارسال نظر