آموزش نوشتن اسکریپت ارسال ایمیل(PHP,Ajax) بخش یک
حتما برای شما هم پیش اومده که تو پروژه های برنامه نویس تون بخواهید ایمیل هایی با قالب Html ارسال کنید، مثلا برای ارسال ایمیل فراموشی رمز عبور یا ایمیل خوش آمد گویی بعد از ثبت نام کاربر.
تو این آموزش ما میخواهیم با استفاده از کتابخانه PHP Mailer که یک کتابخانه برای زبان برنامه نویسی php هست استفاده کنیم برای ارسال ایمیل حرفه ای است رو با استفاده jquery و Ajax و یک فرم ارسال ایمیل طراحی کنیم، که ایمیلی با قالب html ارسال میکنه.
پس با ما باشید تا آخر این آموزش حرفه ای 🙂
۱-برای شروع کدهای html رو به این صورت مینویسیم :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ | <div class="wrapper"> <div class="result"></div> <form method="POST" action=""> <p> <label for="txtemail"> ایمیل کاربر : <input id="email" size="۴۰" type="text" name="txtemail"> </label> </p> <p> <label style="vertical-align: top;" for="txtemail">محتوای ایمیل : <textarea id="content" style="width:350px;height:150px;" name="content" ></textarea> </label> </p> <input id="submit" type="submit" name="Send" value="ارسال ایمیل"> </form> </div> |
یه فرم هست برای دریافت اطلاعات از کابر و ایمیل کردن اطلاعات با قالب html .
۲-قدم بعدی نوشتن کدهای جاوا اسکریپت ajax هست که فرم ما با ajax ارسال بشه و صفحه رفرش نشه.
برای یادگیری میتونید به قسمت آموزش جاوا اسکریپت سایت مراجعه کنید.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ | $(document).ready(function(){ $('#submit').on('click',function(){ var email=$('#email').val(); var content=$('#content').val(); var res=$('.result'); if(email=="" || content=="") { alert('لطفا اطلاعات را به صورت صحیح وارد نمایید'); return false; } res.html('<img src="./css/loading.gif"><p>در حال ارسال اطلاعات ...</p>').show(); $.ajax({ url:'send.php', type:'post', data:{email:email,content:content}, dataType:'json', success:function(resp){ if(resp.stat) { res.addClass('success'); res.html(resp.message); } else{ res.addClass('error'); res.html(resp.message); } } }); return false; }); }); |
تو این بخش ما کد های لازم برای چک کردن فیلد های فرم اصلی قرار دادیم و حالا شما میتونید کد های چک کردن صحت ایمیل رو هم قرار بدید،بعد درخواست ایجکس خودمون رو با اطلاعات لازم (ایمیل کاربر و محتوای ایمیل) به صفحه سمت سرور میفرستیم تا ایمیل رو ارسال کنه.در قسمت درخواست ای جکس قسمت url آدرس صفحه مورد نظر برای پردازش اطلاعات و قسمت type نوع ارسال اطلاعات رو مشخص میکنه،بخش data اطلاعات ارسالی و قسمت dataType هم نوع محتوای برگشتی رو مشخص میکنه،حالا در قسمت بعدی این آموزش مشخص میشه چرا ما از فرمت json استفاده کردیم.قسمت success مشخص میکنه در صورت موفقیت آمیز بودن عملیات چه کاری انجام بدیم که ما اینجا یه پیغام مبنی بر صحت عملیات به کاربر نشون دادیم.
۳- قالب html ساده برای ایمیل
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ | <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>سایت من</title> </head> <body style="font-family: tahoma"> <!-- Start Header--> <header style="background:#f52e2e;padding: 15px"> <h1 style="">user : #username#</h1> </header> <!-- END Header--> <!-- Start Main--> <section> <p style="font-size: 15px;">#content#</p> </section> <!-- END Main--> <!-- Start Footer--> <footer style="background:#4d91f7;padding: 15px"> <p class="copyRight">© Copyright ۲۰۱۸ | iwebpor.ir </p> </footer> <!-- END Footer--> </body> </html> |
حتما استایل دهی باید به صورت inline باشه یعنی باید به خود تک تک عناصر این صفحه استایل بدید.
تا اینجای کار کدهای فرانت رو نوشتیم در قسمت بعدی این کدها رو کامل میکنیم و قسمت بک اند رو مینویسیم.
