× خانه ویدیو دانلود اپلیکیشن درباره ما ورود / ثبت نام

  • خانه
  • ویدیو
  • دانلود
  • اپلیکیشن
  • درباره ما
  • ورود / ثبت نام
  • خانه
  • ویدیو
  • دانلود
  • اپلیکیشن
  • درباره ما
  • ورود / ثبت نام
خانه
|
پست های html
|
طراحی ناحیه کاربری HTML و CSS

مطالب

  • CSS
  • Git
  • HTML
  • Javascript
  • PHP
  • Web

بیشترین بازدید

  • طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس با استفاده از PHP و SOAP

    ساخت وب سرویس با استفاده از PHP و SOAP

    به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع  نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم  SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس RESTful با استفاده از PHP

    ساخت وب سرویس RESTful با استفاده از PHP

    Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • آموزش نصب و استفاده از Composer

    آموزش نصب و استفاده از Composer

    Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت WSDL با استفاده از PHP

    ساخت WSDL با استفاده از PHP

    در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL  را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
تبلیغات

دانلودها

  • آموزش لاراول: معرفی و آموزش گام به گام Laravel
  • آموزش ساخت بازی XO با استفاده از React - بخش دوم
  • آموزش ساخت بازی XO با استفاده از React - بخش اول
  • آموزش React - قسمت سوم
  • آموزش React - قسمت دوم

سوالات

  • اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

    چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install  و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
  • چک کردن موجود بودن یک رکورد در Laravel

    من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
  • لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

    من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که  می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
  • چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

    من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
  • چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

    کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
  • Eloquent: شمارش و تشخیص خالی بودن

    آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
  • لاراول 5: نمایش HTML در Blade

    من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
  • ReactJSX: استفاده از Props بین کوتیشن

    چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}"> 
  • ارتباط بین دو کامپوننت در React

    اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟ 
  • Show یا Hide کردن عنصر در React

    من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم.  می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 

اشتراک

طراحی ناحیه کاربری HTML و CSS

طراحی ناحیه کاربری HTML و CSS

۲۷ آذر ۱۳۹۴
دانیال افشار
3248

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

  • ثبت آگهی
  • مشاهده آگهی
  • تغییر گذرواژه

می باشد.

در ادامه مطلب همراه من باشید.

پس از ورود به این ناحیه، کاربران به قسمت "مشاهده آگهی های من" هدایت می شوند بنابراین یک فایل با نام myads.php را ایجاد می کنیم که در این فایل کدهای HTML به همراه کدهای PHP قرار می گیرند زیرا در این قسمت قصد داریم اطلاعات ثبت شده توسط کاربران را نمایش دهیم که باید با استفاده از PHP و MySQL اطلاعات را از پایگاه داده دریافت و در این قسمت نمایش دهیم. همانطور که قبلا بررسی کردیم کدهای PHP را می توان بین کدهای HTML نوشت.

از کدهای HTML صفحه اصلی برای طراحی ناحیه کاربری استفاده می کنیم. با این تفاوت که نام کلاس ads را به main تغییر می دهیم و در div با کلاس side قسمت های مختلف ناحیه کاربری را قرار می دهیم. البته باید به این نکته توجه داشت که فایل های CSS هر صفحه را جداگانه ایجاد کرده و در پوشه style ذخیره می کنیم تا علاوه بر تمیز بودن روند کاری شناسایی و ردیابی شناسه ها و سبک ها آسان تر انجام شود. علاوه بر این آدرس صفحه نخست را به قسمت top اضافه می کنیم تا در هر قسمت از سایت به صفحه نخست سایت دسترسی داشت. لینک این صفحه را به div با کلاس top تمامی صفحه ها اضافه می کنیم:

<div class="top">
    <img src="images/icon.png">
    <ul>
        <li><a href="http://localhost/ad">صفحه اول</a></li>
        <li><a>درباه ما</a></li>
        <li><a href="login.html">ورود</a></li>
    </ul>
</div>

همانطور که در کد بالا مشاهده می کنید لینک صفحه نخست سایت را در تگ ul موجود در div با کلاس top اضافه کردم. این لینک را به دیگر صفحات این سایت به صورت بالا اضافه کنید.

نکته حائز اهمیت دیگر اضافه کردن تگ html و تغییر ارتفاع سه تگ: html، body و content می باشد.

برای اینکه صفحه ما و تگ هایی که در صفحه ایجاد کردیم کل صفحه را در بر گیرد از واحد % استفاده کردم. به هر سه تگ body، html و content ارتفاع 100% را اختصاص دادم.

html{
    height:100%;
}
body{
    height: 100%;
    margin: 0px;
    background-color: #f7deb5;
    font:13px tahoma;
}
.content{
    display: table;
    width: 940px;
    height: 100%;
    padding-top: 1px;
    margin: 50px auto;
}

با تغییرات بالا این سه تگ در برگیرنده کل ارتفاع صفحه مرورگر خواهد بود. یکی از مزیت های این تغییر، قرار گیری قسمت footer در انتهای صفحه می باشد.

باید به این نکته هم توجه داشت که ارتفاع بخش ads مقدار 500 پیکسل باقی نخواهد ماند و باید مقدار auto را برای این بخش قرار دهیم زیرا در صورت اضافه شدن محتوا ارتفاع این بخش باید به صورت خودکار اضافه شود که برای این منظور باید از ثابت auto برای تنظیم ارتفاع استفاده کنیم.

.ads{
    float: left;
    width: 650px;
    height:auto;
    margin: 5px 14px 15px;
    border: 1px solid #BDBDBD;
    border-radius: 2px;
    background-color: #FEFEFE;
}

همانطور که در کد بالا مشاهده می کنید ارتفاع بخش ads را به auto تغییر دادم، تا در صورت اضافه شدن محتوا ارتفاع این بخش به صورت خودکار تنظیم شود.

حال برای مشاهده تغییرات انجام شده به دو تصویر زیر توجه کنید:

در تصویر بالا مشاهده می کنید که تگ footer در جای نا مناسبی قرار گرفته است، زیرا تگ div با کلاس content دارای ارتفاع auto می باشد و این مقدار با توجه به محتوای داخل این قسمت ارتفاع این تگ را مشخص می کند، با توجه به اینکه تگ div با کلاس footer بعد از تگ div با کلاس content قرار گرفته است با احتساب margin-top پایین تر از قسمت content قرار گرفته است اما به پایین صفحه منتقل نشده است. در صورتی که ارتفاع قسمت content را برابر با 100% قرار دهیم، این تگ تمامی ارتفاع موجود body و html را در بر می گیرد و تگ div با کلاس footer که بعد از این قمست قرار گرفته است به انتهای صفحه منتقل می شود.

حال کدهای فایل myads.php را بررسی می کنیم:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Advertising</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style/back-style.css">
        <link rel="stylesheet" href="style/myads-style.css">
    </head>
    <body>
    <div class="top">
        <img src="images/icon.png">
        <ul>
            <li><a href="http://localhost/ad">صفحه اول</a></li>
            <li><a>درباه ما</a></li>
            <li><a href="login.html">ورود</a></li>
        </ul>
    </div>
        <div class="content">
            <div class="side">
                <div>نام</div>
                <ul>
                    <li><a href="submitad.php">ثبت آگهی</a></li>
                    <li><a href="myads.php">آکهی های من</a></li>
                    <li><a href="changepass.php">تغییر گذرواژه</a></li>
                    <li><a href="exit.php">خروج</a></li>
                </ul>
            </div>
            <div class="main">
                <form method="post" action="http://localhost/ad/delete_ad.php">
                <table class="myads">
                    <tr><th><input type="checkbox"></th><th>عنوان آگهی</th><th>قیمت</th><th>دسته بندی</th></tr>

                </table>
                    <input type="submit" value="حذف">
                </form>
            </div>
        </div>
        <div class="footer">
            <span>سایت تبلیغات</span>
        </div>
    </body>
</html>

در ابتدا به قسمت head اشاره کنم که در این بخش دو فایل CSS را ضمیمه صفحه کردم همانطور که پیشتر توضیح دادم یک فایل CSS به صورت کلی برای بخش های ناحیه کابری در نظر می گیریم که با نام back-style.css به صفحه ضمیمه شده و شبیه فایل style.css است با چند تفاوت جزئی:

  1. تغییر نام کلاس ads به main
  2. اضافه شدن تگ table و تغییر ویژیگی های این تگ
  3. اضافه شدن گزینشگر side div. که جهت نمایش نام کاربر در قسمت side قرار گرفته است.
.main{
    float: left;
    width: 650px;
    height: auto;
    margin: 5px 14px 15px;
    border: 1px solid #BDBDBD;
    border-radius: 2px;
    background-color: #FEFEFE;
}
table{
    float:right;
    margin: 25px 25px;
    direction: rtl;    
}
table th{
    padding: 5px 15px;
    margin:2px;
    background-color: #B6B6B6;      
}
table td{
    padding: 15px 0px;
    text-align: center;
}
.side div{
    float: right;
    width: 70px;
    height:16px;
    padding:5px 21px 0px 0px;
    margin: 3px 5px;
    direction: rtl;
    font-weight: bold;
    background: url(../images/user.png) no-repeat right;
}

در قسمت side موجود در فایل myads.php لینک قسمت های مختلف ناحیه کاربری قرار گرفته است اما قبل از لینک ها یک تگ div با محتوای "نام" قرار گرفته است که در قسمت بعد نام کاربر در آن قرار می گیرد.

در کد بالا از ویژگی background برای تعیین پس زمینه تگ div موجود در قسمت side استفاده کردم که مقادیر با فاصله خالی از یک دیگر متمایز شده اند. مقدار اول آدرس فایل تصویری است که در پس زمینه گزینشگر نمایش داده می شود(تصویر در +PDF این قسمت قرار گرفته)، گزینه دوم یعنی ثابت no-repeat مشخص می کند که تصویر در پس زمینه تکرار نشود. به عنوان مثال هنگامی که عرض گزینشگر از عرض تصویر بیشتر باشد، تصویر به صورت کاشی وار در پس زمینه تکرار می شود. با اضافه کردن این ثابت، تصویر به صورت منفرد در پس زمینه قرار می گیرد. مقدار بعدی right است که موقعیت مکانی تصویر در پس زمینه را مشخص می کند به عنوان مثال هنگامی که عرض گزینشگر از عرض تصویر بزرگتر باشد، با اختصاص این مقدار، تصویر به سمت راست تگ منتقل می شود. همچنین می توان به جای ثابت right یا left از مقدار عددی، یا تلفیقی از ثابت و مقدار عددی استفاده کرد.

و اما باقی کدهای فایل back-style.css با فایل style.css یکسان می باشد.

در قسمت main یک جدول به همراه فرمی جهت نمایش آگهی های ثبت شده و همچنین یک دکمه با عنوان "حذف" برای ارسال اطلاعات فرم به سمت سرور قرار گرفته است  که همانطور که در کد بالا ملاحظه می کنید یکسری از ویژیگی های این جدول و تگ های موجود در این جدول مانند td، th در فایل back-style.css تغییر داده شده است همچنین در فایل myads-style.css حاشیه جدول و دکمه ی موجود در این صفحه به صورت زیر تغییر داده شده است:

table{
    width:597px;
}
input[type=submit]{
    margin:10px 40px;
}

در کد بالا ملاحظه می کنید که حاشیه دکمه و عرض جدول در فایل myads-style.css جداگانه تغییر داده شده است و این ویژیگی ها بسته به سلیقه ممکن است در صفحات دیگر توسط فایل CSS مربوطه تغییر داده شود.

در جدول موجود در صفحه "آگهی های من" از تگ th استفاده کردم. معمولا تگ th در جدول جهت نمایش عنوان ستون استفاده می شود و محتوا را به صورت ضخیم یا bold نمایش می دهد. در جدول موجود 4 ستون قرار دارد که به ترتیب:

  • ستون اول: کادر اانتخاب یا checkbox جهت انتخاب آگهی
  • ستون دوم: عنوان آگهی
  • ستون سوم: قیمت کالا یا هر موردی که جهت آگهی ثبت می شود
  • ستون چهارم: دسته بندی آگهی

می باشد.

اما برای ثبت آگهی توسط کاربران فایل submitad.php را ایجاد می کنیم. در تگ div با کلاس main یک جدول، با سبکی مشابه جدول نمایش آگهی قرار دادم و در هر ستون از جدول یک فیلد ورودی برای دریافت اطلاعات آگهی ایجاد کردم و جدول را در یک فرم با متد post و action برابر با insertad.php، قرار دادم همچنین در پایین جدول یک دکمه با مقدار "ثبت" جهت ارسال اطلاعات فرم قرار می دهیم. در زیر کد صفحه submitad.php را مشاهده می کنید:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Advertising</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style/back-style.css">
        <link rel="stylesheet" href="style/submitad-style.css">
    </head>
    <body>
        <div class="top">
            <img src="images/icon.png">
            <ul>
                <li><a href="http://localhost/ad">صفحه اول</a></li>
                <li><a>درباه ما</a></li>
                <li><a href="login.html">ورود</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="side">
                <div>نام</div>
                <ul>
                    <li><a href="submitad.php">ثبت آگهی</a></li>
                    <li><a href="myads.php">آکهی های من</a></li>
                    <li><a href="changepass.php">تغییر گذرواژه</a></li>
                    <li><a href="exit.php">خروج</a></li>
                </ul>
            </div>
            <form method="post" action="insert_ad.php">
            <div class="main">
                <table>
                    <tr><th>عنوان کالا</th><th>قیمت کالا</th><th>دسته بندی کالا</th></tr>
                    <tr><td><input type="text" name="title"></td><td><input type="text" name="price"></td><td><select name="category">
                                <option value="خودرو">خودرو</option>
                                <option value="لوازم خانگی">لوازم خانگی</option>
                            </select></td></tr>
                </table>
                <input type="submit" value="ثبت">                
            </div>
            </form>
        </div>
        <div class="footer">
            <span>سایت تبلیغات</span>
        </div>
    </body>
</html>

در صفحه submitad.php یک تگ select جهت انتخاب دسته بندی های موجود قرار دادم، که هریک از دسته بندی ها در تگ option قرار گرفته و مقدار تخصیص داده شده به خصوصیت value به سمت سرور ارسال می شود. البته باید به این نکته توجه داشته باشید که دسته بندی ها باید از سرور دریافت و نمایش داده شوند بدین معنی که مدیر سایت دسته بندی های مختلف را وارد کرده و در این قسمت نمایش داده شود که ما در اینجا برای نمایش روند کار  مقادیر را به صورت دستی وارد کرده ایم.

و فایل submitad-style.css به صورت زیر می باشد:

table{
    width:600px;
}
table td input[type=text]{
    width: 170px;
    height:20px;
}
table td select{
    width:120px;
    height:25px;
}
input[type=submit]{
    float:left;
    width:80px;
    margin:5px 0px 10px 28px;
}

در کد CSS بالا هم برخی از ویژیگی های تگ ها موجود در صفحه را تغییر دادم.

قسمت تغییر گذرواژه همانطور که از نامش پیداست برای تغییر گذرواژه کاربر می باشد که برای این منظور فایل changepass.php را ایجاد کردم. در این صفحه هم جدولی به همراه فیلد کادر متنی و یک دکمه جهت ارسال اطلاعات قرار دادم. این جدول بر خلاف دو جدول قبل از سبک متفاوتی برخوردار است اما همانند دو جدول قبل در یک فرم قرار داده شده است که با متد post اطلاعات را به سمت سرور: change_password.php که آدرسش در action فرم قرار گرفته ارسال می کند.

در زیر کد فاایل changepass.php قرار گرفته است:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Advertising</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style/back-style.css">
        <link rel="stylesheet" href="style/changepass-style.css">
    </head>
    <body>
        <div class="top">
            <img src="images/icon.png">
            <ul>
                <li><a href="http://localhost/ad">صفحه اول</a></li>
                <li><a>درباه ما</a></li>
                <li><a href="login.html">ورود</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="side">
                <div>نام</div>
                <ul>
                    <li><a href="submitad.php">ثبت آگهی</a></li>
                    <li><a href="myads.php">آکهی های من</a></li>
                    <li><a href="changepass.php">تغییر گذرواژه</a></li>
                    <li><a href="exit.php">خروج</a></li>
                </ul>
            </div>
            <form method="post" action="change_password.php">
            <div class="main">
                <table>
                    <tr><td><span>گذرواژه</span></td><td><input type="password" name="password"></td></tr>
                    <tr><td><span>گذرواژه جدید</span></td><td><input type="password" name="newpassword"></td></tr>
                    <tr><td><span>تکرار گذرواژه جدید</span></td><td><input type="password" name="renewpassword"></td></tr>
                    <tr><td colspan="2"><input type="submit" value="ذخیره"></td></tr>
                </table>
            </div>
            </form>
        </div>
        <div class="footer">
            <span>سایت تبلیغات</span>
        </div>
    </body>
</html>

و کد CSS صفحه به صورت زیر در فایل changepass-style.css قرار گرفته است:

table{
    margin:0px 50px 8px;
}
table td{
    padding: 25px 10px 0px;
}

در قسمت بعد با استفاده از PHP و MySQL اطلاعات مربوط به آگهی ها را دریافت می کنیم و در پایگاه داده ذخیره می کنیم.

آموزش سایت تبلیغاتیHTMLCSS

مطالب مرتبط

طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL
مشاهده

طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

طراحی صفحه ثبت نام و ورود کاربران HTML و CSS
مشاهده

طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

طراحی صفحه اول سایت تبلیغات  CSS
مشاهده

طراحی صفحه اول سایت تبلیغات CSS



نظر شما

مطالب

  • CSS
  • Git
  • HTML
  • Javascript
  • PHP
  • Web

بیشترین بازدید

  • طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس با استفاده از PHP و SOAP

    ساخت وب سرویس با استفاده از PHP و SOAP

    به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع  نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم  SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس RESTful با استفاده از PHP

    ساخت وب سرویس RESTful با استفاده از PHP

    Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • آموزش نصب و استفاده از Composer

    آموزش نصب و استفاده از Composer

    Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت WSDL با استفاده از PHP

    ساخت WSDL با استفاده از PHP

    در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL  را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟

دانلودها

  • آموزش لاراول: معرفی و آموزش گام به گام Laravel
  • آموزش ساخت بازی XO با استفاده از React - بخش دوم
  • آموزش ساخت بازی XO با استفاده از React - بخش اول
  • آموزش React - قسمت سوم
  • آموزش React - قسمت دوم

سوالات

  • اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

    چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install  و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
  • چک کردن موجود بودن یک رکورد در Laravel

    من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
  • لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

    من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که  می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
  • چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

    من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
  • چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

    کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
  • Eloquent: شمارش و تشخیص خالی بودن

    آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
  • لاراول 5: نمایش HTML در Blade

    من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
  • ReactJSX: استفاده از Props بین کوتیشن

    چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}"> 
  • ارتباط بین دو کامپوننت در React

    اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟ 
  • Show یا Hide کردن عنصر در React

    من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم.  می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 

اشتراک

منو
خانه
ویدئو
دانلود
اپلیکیشن
درباره ما
خدمات
قالب سایت
خدمات
ما را دنبال کنید
Android Logo
Github Logo
© 2015 - 2025 All rights reserved