آموزش پیاده سازی اسلاید شو با ASP.NET و SQL SERVER

دسته بندی: پایگاه داده
زمان مطالعه: 6 دقیقه
۰۸ شهریور ۱۳۹۲

دوستان سلام،همون طور که قول داده بودیم،قسمت دوم آموزش پیاده سازی اسلایدشو که برای ASP.NET هست رو برای این مطلب در نظر گرفتیم،ما اساس کار رو توی آموزش قبلی که برای PHP بود گفتیم و توی این مطلب صرفا کد ها رو به #C و ASP تبدیل می کنیم.پس با ما همراه باشید.

خوب اول از همه ساخت جدول در SQL_SERVER،خوب توی این تصویر خودتون می بینید ما چه فیلد هایی و با چه مشخصاتی لازم داریم.

ساخت جدول مطالب

ساخت جدول مطالب

توی مطلب قبلی ما تقریبا این فیلد ها رو توضیح دادیم که قراره چه داده هایی رو برای ما ذخیره کنن،خوب ما میریم سراغ صفحه ارسال مطلب جدید.

<table>
<tbody>
<tr>
<td>عنوان مطلب :</td>
<td><asp:TextBox ID="txttitle" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td>خلاصه مطلب :</td>
<td> <asp:TextBox ID="txtsm" Width="300" Height="120" TextMode="MultiLine" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>متن مطلب :</td>
<td> <asp:TextBox ID="txtbody" Width="600" Height="250" TextMode="MultiLine" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>درج اسلایدر :</td>
<td>
<asp:CheckBox ID="chkslider" runat="server" /></td>
</tr>
<tr id="row" >
<td>تصویر اسلایدر :</td>
<td><asp:FileUpload ID="uploader" runat="server" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button CssClass="btn" ID="btnSend" runat="server" Text="ارسال مطلب" OnClick="btnSend_Click" />
</td>
</tr>
</tbody>
</table>

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

کدی که برای قسمت جاوا اسکریپت نوشتیم دقیقا همون مطلب قبلیه فقط یه توضیح کوچیک  داره اونم اینه که برای دریافت ID عناصر صفحه توی ASP.NET  ما یکم کد رو تغییر میدیم،کاربران ASP میدونن که ما این جا از عناصر سمت سرور استفاده کردیم و چون ID هایی که بهشون اختصاص داده میشه توی قسمت Code Behind استفاده میشه بنابراین ID این عناصر توی سمت Client فرق داره و ما برای اجرای کد هایی مثل جاوا اسکریپت باید حتما اون ID رو دریافت کنیم.

$(document).ready(function () {
$('#<%=chkslider.ClientID%>').on("change", function () {

if (this.checked == true) {
$('#row').css({ 'display': 'table-row' });
}
else {
$('#row').css({ 'display': 'none' });
}

});

});

اون دستور ClientID دقیقا ID عنصر در سمت کاربر (client) رو برای ما برمی گردونه،اون علامت های <%%> هم کد های اسکریپتی ASP.NET هست.

کد های سمت سرور صفحه ارسال مطلب

protected void btnSend_Click(object sender, EventArgs e)
{
DAL data = new DAL();
int slider=0;
string path = "";
if (uploader.HasFile)
{
Random rnd = new Random();
string prename = rnd.Next(10000,9999999).ToString();
string filename = uploader.PostedFile.FileName;
path = "uploads/slider/" +prename+filename;
uploader.SaveAs( Server.MapPath(path));
slider =1;
}
string sql = "INSERT INTO slider_news(title,sm,body,slider,img) VALUES('{0}','{1}','{2}','{3}','{4}')";
sql = string.Format(sql,txttitle.Text.Trim(),txtsm.Text.Trim(),txtbody.Text.Trim(),slider,path);
data.connect();
data.docommand(sql);
data.disconnect();

}

خوب اینجا هم ما کد نحوه ثبت مطلب توی دیتابیس رو نوشتیم،برای کار با دیتابیس از کلاس DAL که برای راحتی کار نوشتیم استفاده کردیم،خوب بعدش چک کردیم که عنصر آپلود فایل،فایلی توی خودش داره یا نه اگه داشت که یه سری کد دیگه نوشتیم،با استفاده از کلاس Random میخوایم یه عدد تصادفی درست کنیم که به اسم فایل اضافه کنیم که تکراری نباشه (شما حتما چک کنید ببینید فایل موجوده یا نه که اگه موجود بود یه عدد دیگه تولید کنید)، اسم فایل رو از عنصر آپلود فایل دریافت کردیم و بعدش هم مسیری که مشخص میکنه فایل کجا ذخیره بشه رو مشخص کردیم و در آخر با متد SaveAs فایل رو توی مسیر جاری (Server.MapPath مسیر فیزیکی سایت رو برای ما برمیگردونه) ذخیره میکنیم و متغییر slider رو برابر 1 قرار میدیم (متغییر slider مشخص میکنه که قراره این مطلب با تصویری که داره توی اسلایدر سایت به نمایش در بیاد).

خوب بعدشم کوئری SQL رو نوشتیم و با مقادیر دریافتی از اون فرم صفحه این کوئری رو فرمت دهی کردیم ،با استفاده از متد connect از شی data که از کلاس  DAL نمونه سازی شده به دیتابیس وصل شدیم،با متد docommand از همین شی کوئری رو پردازش کردیم و با متد disconnect از دیتابیس قطع اتصال کردیم.

صفحه نمایش اسلاید شو

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

 

<asp:Repeater ID="rep_slider" runat="server">
<HeaderTemplate>
<div class="slider-wrapper theme-default">
<div style="text-align:center;margin-top:30px;">Edited By Kaivan Alimohammadi : keivan@7learn.com</div>
<div id="slider" class="nivoSlider">

</HeaderTemplate>
<ItemTemplate>
<a href="https://7learn.com">

<img src="<%#DataBinder.Eval(Container.DataItem,"img")%>" data-thumb="<%#DataBinder.Eval(Container.DataItem,"img")%>" alt="<%#DataBinder.Eval(Container.DataItem,"title")%>" title="<%#DataBinder.Eval(Container.DataItem,"sm")%>">

</a>
</ItemTemplate>
<FooterTemplate>
</div>
</div>
</FooterTemplate>
</asp:Repeater>

توی قسمت HeaderTemplate کد هایی که لازمه اول صفحه باشه و تکراری نیست و می نویسیم (تگ های اصلی نگهدارنده اسلاید شو ) توی قسمت ItemTemplate کد های تکراری رو مینویسیم و توی قسمت FooterTemplate کد های تکرار نشدنی(تگ های بسته شدن برای تگ های نگهدارنده اصلی اسلاید شو) رو قرار میدیم.

توی قسمت ItemTemplate ما از همچین کدی رو نوشتیم.

<a href="https://7learn.com">

<img src="<%#DataBinder.Eval(Container.DataItem,"img")%>" data-thumb="<%#DataBinder.Eval(Container.DataItem,"img")%>" alt="<%#DataBinder.Eval(Container.DataItem,"title")%>" title="<%#DataBinder.Eval(Container.DataItem,"sm")%>">

</a>

یه تگ لینک که داخلش یه تگ تصویر هست،ما توی خاصیت src آدرسی که توی دیتابیس ذخیره کردیم رو دریافت میکنیم و نشون میدیم،توی قسمت alt و title هم عنوان مطلب رو نشون میدیم (خاصیت data-thumb متعلق به اسلایدره که ما به خاطر خود کد اسلایدر داخلش تصویر رو قرار دادیم )،خوب حالا شاید سوال شما این باشه که این کد پایین چیه.

<%#DataBinder.Eval(Container.DataItem,"img")%>

خوب این یه کد اسکریپتی سمت سرور هست که با اون مقادیری که از دیتابیس گرفتیم رو به خروجی تحویل میدیم.اگه دقت کنید توی پارامتر دوم متد Eval ما نوشتیم img این دقیقا همون فیلد توی جدول دیتابیس هست که آدرس تصویر رو توی خودش ذخیره میکنه،دیگه بقیه فیلد ها رو هم خودتون ببینید چطور استفاده شده چون کاملا واضح و مشخصه.

حالا توی قسمت Code Behind صفحه نمایش اسلاید شو همچین کدی رو مینویسیم.

protected void Page_Load(object sender, EventArgs e)
{
DAL data = new DAL();
int count = 4;
string sql = "SELECT TOP {0} id,title,sm,img FROM slider_news WHERE slider=1 ORDER BY id DESC";
sql = string.Format(sql,count.ToString());
rep_slider.DataSource = data.select(sql);
rep_slider.DataBind();

}

باز هم از کلاس DAL استفاده کردیم (این جا مشخص میشه که کد نویسی شی گرا چقدر خوب و بدرد بخوره و از تکرار کد ها جلوگیر ی میکنه،اگه ما از شی گرایی استفاده نمی کردیم مجبور بودیم هم توی صفحه قبلی و هم توی این صفحه کد های ارتباط و پردازش با دیتابیس رو بنویسیم و تکرار کنیم،حالا شما توی پروژه های بزرگ فکر کنید که چقدر نیاز هست با بانک ارتباط برقرار و داده رد و بدل کنید 🙂 )،با متغییر count تعدادی که لازم نشون داده بشه رو تنظیم میکنیم (این متغییر هم میتونه از دیتابیس خونده بشه و مثلا توی کنترل پنل سایتتون که قراره طراحی کنید هم توی قسمت تنظیمات مشخص کنید که تعداد چند تا باشه)،کوئری رو نوشتیم و مشخص کردیم که فقط اونایی که مقدار فیلد slider برابر یک هست واکشی بشن،بعد از قالب بندی متن کوئری،با متد select از کلاس DAL اونو پردازش کردیم و مقدار برگشتی که یه DataTable هست رو ریختیم توی همون Repeater که توی صفحه به کار بردیم،بعدشم با DataBind کردن داده ها رو به Repeater متصل کردیم.

خوب اینم از اسلایدشو و پیاده سازی توی ASP.NET و SQL SERVER.

امیدوارم براتون مفید باشه،موفق و پیروز باشید.

دانلود کد های ASP.NET

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

نظرات کاربران

شیدا

با سلام وتشکر،من میخوام اسلاید شو رو تو ی ستون ی جدول قرار بدم بطوریکه در بالای اون ستون قرار بگیره اما وسط ستون میمونه و فرم خدولمو بهم میریزه راهنمایی کنید لطفا!ارتفاع رو هم میتونم تغییر بدم؟

کیوان علی محمدی

سلام این بستگی به ساختار html و کدهایی css ای هست که استفاده کردین.بله مطمئنا میشه ارتفاع رو هم تنظیم کرد.

Siyamak mahmoudi

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

مهری سامان

دستت درد نکنه پست خیلی خوبی بود. فقط لطفا به جای دستور زیر:
string filename = uploader.PostedFile.FileName
دستور زیر رو جایگزین کنید تا درست کار کنه:
string filename = uploader.FileName

کیوان علی محمدی

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

saba

سلام از آموزش مفیدتون ممنونم. یه سوال دارم. من میخام برای اسلاید به جای اینکه از عدد استفاده کنم عکس بذارم که هر کدوم از اسلایدها که نمایش داده میشه کمه مربوط به اون عکس متفاوت داشته باشه مثل سایت www.systemgroup.net/‎ . توی فایل های اسکریپتش این تغییرات رو دادم ولی درست نشده. میشه بگین چیکار باید بکنم؟
directionNav: false,
directionNavHide: true,
controlNav: false,
controlNavThumbs: true,

کیوان علی محمدی

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

pariya

to on gesmat ke cod script ro mide miyaram to button copy mikonam cod ha ro khata migire??

کیوان علی محمدی

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

pariya

bazam mamnon az site khobeton va rahnemaiton.
man mikham to sitam ye text bax vaseye search dar google bezaram bishtare kod script to sitha ro danload kardam javab nadad.
mishe ye code script vase emkane sreach to google dar websit ro bezarin.

کیوان علی محمدی

سلام خود گوگل همچین امکانی رو فراهم کرده،از این لینک ببینید.

pariya

salam
mamnon az rahnemaihaye khobi ke behem kardin .
manam to in mored mondam ke ye size fix vase grid view bedam bad ba ziyad shodane dadehaye tosh khodkar scrollbar ijad beshe

nazanin

salam
mamnon az rahnemaihaye khobeton.
manam hamin moshkelo daram yani mikham ye siz vase grid view bedam bade inke dadehaye tosh ziyad shod khodkar scrool ijad beshe .

nazanin

salam ba tashakor az site khobeton mishe ye kod vase gozashtane scrollbar dar grid view da web rod garar bedin?

کیوان علی محمدی

سلام گرید ویوو رو داخل یه تگ div قرار بدید و بعد برای تگ div خصوصیات height و width مشخص تعریف کنید (مثلا 500px) و بعد هم خاصیت overflow رو برابر scroll تنظیم کنید.

امیر

سلام
چرا آموزش ارسال مطلب رو توی سایت قرار نمیدید ؟؟؟

کیوان علی محمدی

چشم عجله نکنید،قرار میدیم.

pariya

man to haste raygan apload kardam to somee.com
to mail domain add mizanam jai nadare ke user pasword maillamo bedam.
rasti age u matlabi darmorede amozeshe upload kardane sql darinto sit bezarin

کیوان علی محمدی

حالا نمیدونم این سایت این سرویس رو ارائه میکنه یا نه،اما به احتمال زیاد باید داشته باشه همچین سرویسی رو،شما باید نام کاربری ،کلمه عبور اکانت رو هاست رو توی همین کد آموزش قرار بدید دقیقا اونجایی که نوشته username و password.

کیوان علی محمدی

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

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل