محمد انوری
۴ دقیقه
۲۲۰۸۰
آموزش ساخت سرچ باکس در HTML
آموزش ساخت سرچ باکس در HTML : یکی از مهم‌ترین بخش‌های هر سایت، فرم جستجوی آن است. زیرا به کمک سرچ باکس، کاربران راحت‌تر به مطالب سایت دسترسی پیدا می‌کنند و تعامل بیشتری با سایت خواهند داشت. امروزه کمتر سایتی را می‌توان پیدا کرد که این امکان را برای کاربران خود پیاده نکرده باشد. در این مطلب قصد داریم به آموزش ویدئویی ساخت سرچ باکس در HTML بپردازیم، پس با ما همراه باشید.
آموزش ساخت سرچ باکس در HTML
در ویدئوی آموزشی بالا شما با نحوه طراحی و ساخت یک فرم جستجوی زیبا با استفاده از CSS و Jquery آشنا خواهید شد. در این پروژه شما می‌توانید با مباحث مختلفی آشنا شوید که از جمله آن‌ها می‌توان به موارد زیر اشاره کرد :
- کار با انیمیشن ها
- شناخت متدهای پایه Jquery
- استایل دهی با استفاده از CSS
- و…
سرچ باکس چیست و چطور کار می‌کند؟
منظور از سرچ باکس، بخش جستجو وب سایت است که با توجه به اهداف هر سایت طراحی می‌شود. مثلا یک بلاگ ساده یا سایت شخصی به جستجوی پیشرفته نیاز نخواهد داشت، زیرا با یک سرچ باکس ساده کارشان انجام خواهد شد. در مقابل فروشگاه‌های اینترنتی به خاطر دسته‌بندی متنوع خود، یک سرچ باکس حرفه‌ای نیاز خواهند داشت. همچنین سایت‌های آگهی به تفکیک بیشتر و شخصی سازی جستجو نیاز دارند و باید سرچ باکس خود را متنوع طراحی کنند. مثلا یک سایت آگهی حرفه‌ای بهتر است در بخش جستجو خودرو، فیلترهایی برای انتخاب مدل، رنگ، کیلومتر، نوع گیربکس، آپشن‌ها و غیره طراحی کند.
در حالت کلی و بسیار ساده منظور سرچ باکس یک فرم HTML است که با CSS ظاهر زیبایی به آن داده شده است. همچنین می‌توان با جاوا اسکریپت یا کتابخانه‌هایی مثل جی کوئری ظاهر سرچ باکس را زیباتر و پویاتر هم کرد. پس از طراحی فرم، کاربر داخل آن عبارتی را تایپ می‌کند و دکمه (Button) مربوط به ارسال را می‌زند. در این قسمت با یک Method مثل Get یا Post محتویات آن عبارت برای سرور ارسال می‌شود. حالا نوبت زبان برنامه نویسی سمت سرور است که کنترل این بخش را به عهده بگیرد. بعد از پردازش به وسیله زبان سمت سرور نتایج جستجو در قالب یک فایل Json برمی‌گردد و به کاربر نشان داده می‌شود.
یک سرچ باکس خوب چه ویژگی‌هایی دارد؟
در مرحله اول سرچ باکس باید در موقعیت خوبی قرار داشته باشد. یعنی قابل دسترس بوده و کاربران به راحتی بتوانند آن را پیدا کنند. نباید کاربران خود را برای پیدا کردن بخش جستجو به زحمت بیندازیم. پس مطمئن شوید که سرچ باکس سایت شما به راحتی توسط کاربر دیده می‌شود. نکته بعدی در طراحی یک سرچ باکس ایده‌آل، مربوط به ظاهر آن است. باید تا جایی که می‌توانید بخش جستجو را زیبا طراحی کنید. زیبایی بصری حس خوبی در کاربران ایجاد می‌کند.
اگر سرچ باکس شما زیبا باشد اما با نیازهای کاربر و سایت هماهنگ نباشد، ممکن است تجربه کاربری (UX) خوبی را به کاربران القا نکند. پس با توجه به فعالیت سایت، بخش‌های مختلفی به جستجو اضافه کنید. همچنین یک سرچ باکس خوب باید قابلیت‌های متنوعی داشته باشد که یکی از آن‌ها قابلیت پیشنهاد نتایج به کاربر بر اساس عبارت وارد شده است. یعنی کاربر بعد از تایپ کردن چند حرف عبارت‌های مشابه را ببیند و بتواند بدون کامل کردن جمله خود جستجو را انجام دهد. پس به عنوان جمع بندی، برای طراحی یک سرچ باکس خوب بهتر است موارد زیر رعایت شوند:
- ظاهر جذابی داشته باشد.
- در جایگاه خوبی قرار گرفته باشد.
- با توجه به نیاز سایت طراحی شود.
- از قابلیت‌هایی مثل پیشنهاد خودکار (AUTO-SUGGESTION) استفاده کند.
جمع بندی
همانطور که دیدید، آموزش ساخت سرچ باکس در HTML یکی از پروژه‌های بسیار خوب برای تمرین طراحی سایت است. زیرا در این پروژه شما باید با زبانهای HTML و CSS به کار کنید و سپس با استفاده از Jquery به تکمیل این فرم بپردازید. سون لرن در این مسیر همراه شماست، پس اگر در این مسیر هرگونه سوال یا ابهامی برای شما به وجود آمد با ما درمیان بگذارید.
فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر:
اگر بخواهیم سرچ باکس ما، صفحه ی thml مورد نظر ما را (که اطلاعات سرچ شده در سرچ باکس درونش هست) را باز کنه، باید چه کار کنیم؟ چگونه باید به پایگاه داده متصل بشه؟
باید از وب سرویس استفاده کنید و دیتا رو بگیرید، بعد داده دریافتی رو در یک صفحه جدید لود کنید. در آخر به اون صفحه روت کنید.
برای این موارد باید به جاوا اسکریپت یا یکی از زبانهای برنامه نویسی مشابه مسلط باشید.
عالی بود
لطفا میشه تم نصب شده روی ویژوال استودیو رو بهم بگین؟
ممنون
اسمش Blue هست.
آموزش خوب وعالی بود
من یکی از طرف دار سایت شما هستم
یک سوال من می خوام داخل این سرچ باکسی که درست میکنم مثل موتور جستجو گوگل به سایت های داخل اینترنت هدایت شود چه کد هایی باید اضافه کرد
تا این اتفاق بیفتد
سپاس
میتونید این صفحه رو مطالعه کنید. ممنون که با ما همراه هستید.
اگر امکانش هس یه راهنمایی به ایمیلم بفرستین:
mohammadrezaazimnejad45@gamil.com
با تشکر
شما میتونید از همین آموزش هم استفاده کنید، منتها باید مشخص کنید که بین داده جدول سرچ بزنه و در خروجی کل ردیف رو برگردونه.
یک راه بهتر استفاده از جی کوئری هست. پیشنهاد میکنم این نمونه کد w3schools رو ببینید.
خیلی باحاله
اگه افزونه ای هست نصب کردید براش میگید؟
خیر کد هام هیچ اروری نمیدی
من می تونم آیدی تلگرام یا همچین چیزی داشته باشم ازتون تا کد هام رو نشونتون بدم؟؟؟
شما میتونید کدهاتون رو به بخش پشتیبانی تلگراممون که آیدیش در پایین صفحه سایت هست، بفرستید.
می خواستم بدونم چرا من با اینکه تمامی کد هایی که توی ویدئو گفتید رو نوشتم سرچ باکس باز نمیشه؟؟؟
تمامی حالت ها رنگ ها همشون اعمال میشه ولی روش که کلیک می کنم باز نمی شه
برای بررسی بهتر که خطا داره یا نه، میتونید با زدن کلید f12 روی مرورگر کروم و رفتن به تب console، این مورد رو چک کنید.
چون قاعدتا اگه باز نمیشه یجای کد اشتباه عمل میکنه و در کنسول خطاها با رنگ قرمز مشخص میشن.
همچین فایلی وجود ندارن شاید غلط ادرسشو نوشتم لطفاً بگید
اون عدد ورژن رو در آدرس اشتباه نوشتید. 5.4.1 نداریم. باید اصلاح کنید به: 3.4.1
احتمالا بخاطر محتوای ویدیویی خطای دید داشتید :)
عذر میخوام دوباره وقتتون رو میگیرم.
مشکل خطاهای فایل js رو حل کردم. فقط اینکه چرا اون خط چشمک زن از سمت راست هستش ؟ در آموزش برعکس و صحیح از سمت چپ به راست بود. اما برای من برعکسه عمل میکنه ! چطور میتونم این رو تغییر بدم ؟
تشکر
احتمالا به این خط استایلی دادید که باعث شده راست چین بشه. اول استایل خود اون باکس و بعد استایل div و ... مربوط بهش رو چک کنید.
راه های زیادی برای چپ چین شدن در CSS وجود داره که یکیش استفاده از dir هست.
روشی که فرمودید رو انجام دادم و متاسفانه خطاهای فایل js نمایش داده شد !
اگر لطف کنید من به پشتیبان تلگرام هم پیام دادم و عکس کد های نوشته شده ام رو فرستادم، لطفا این موضوع رو بررسی کنید.
باتشکر
خب همینکه میتونید خطاهاشو ببینید باز قدم رو به جلویی هست. چشم من پیگیری میکنم که بررسی بشه.
ممنون از آموزش مفیدتون!.
من همه ی مراحل رو پیش بردم اما فکر میکنم مشکل از مسیر نوشتن فایل js هستش. من کد هارو نوشتم و آخرش که بنا به اموزش مدرس ویدیو نشان داده نشد و ایشون دوباره کدهایی رو اضافه کردن تا درست شه من تا اونجا هم پیش رفتم (یعنی آخر مسیر) اما سرچ باکس من باز نمیشه !
فکر میکنم مشکل از نوشتن کدهاست اما همین رو نمیدونم.
لطفا راهنمایی کنید.
برای بررسی بهتر که خطا داره یا نه، میتونید با زدن f12 روی مرورگر کروم و رفتن به تب console، این مورد رو چک کنید.
با تشکر از شما🎓
خیلی خوب بود
مرسی
من میخوام در فرم جست و جو چندین خط رو بتونم وارد کنم واسه همین بخش طراحی فرم به جای تگ input از تگ textarea استفاده کردم، ولی با ایجاد این تغییر دیگه فرم جست و جو باز و بسته نمیشه.
لطفا کمکم کنید.
تشکر
موفق باشید!!
این جز کدهای css است؟من توی آمو.شهای css شبیه این کد ندیدم تا به حال.....ممنون می شم بگین
خیر جز کدهای استاندارد css نیست و کدی مخصوص مرورگرهای کروم و سافاری هست که موتور رندرینگشون webkit هست .
این کد برای استایل دهی به placeholder فیلد های متنی استفاده میشه گویا !
ممنونم
ان شاالله موفق بشی :?: :?:
خوشحالم که براتون مفید بود
موفق باشید
ممنون لطف دارید
موفق و سربلند باشید
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون
خوشحال شدم که خوشت اومد
موفق باشی :wink: :?: :?:
مطلب جالب و خوبی بود :?: :?:
موفق باشی
ممنون داداش
موفق باشی :?: :?:
لطف داری
امیدوارم مفید واقع شده باشه
موفق باشی :?: :?: