I want to send an HTML email using codeigniter. It actually works but it isn't displayed the way I want it to be displayed. I want it to look like this
But it is diplayed as a plain text and a link in my email. How am I going to solve this?
Here's my code (emailhtml view):
<!DOCTYPE HTML>
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row" >
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
Hi User,
</div>
<div class="modal-body">
This is your final step to complete your registration.
Please confirm your email address - just click on the button below.
Confirm Now
</div><!--END of modalb-->
</div><!--END of mod-cont-->
</div><!--END of mod-Dia-->
</div><!--END of row-->
</body>
</html>
And in the controller:
$config = Array(
'protocol' => 'smtp',
'smtp_host' => 'tls://smtp.gmail.com',
'smtp_port' => 465,
'smtp_user' => 'xxxx#gmail.com',
'smtp_pass' => '*****',
'wordwrap' => true
);
//load email library
$this->load->library('email', $config);
$this->email->set_newline("\r\n");
//set email information and content
$this->email->from('xxxx#gmail.com', 'My Name');
$this->email->to($email);
$this->email->subject('Confirmation for Registration');
$this->email->message($this->load->view('admin/EmailHTML', $data,true));
$this->email->set_mailtype('html');
$this->email->send();
Your help would be much appreciated.
Few email clients accept links to external CSS files, in fact there are even some that don't accept embedded style sheets. (CSS support for email clients)
Your best bet is to inline all your styles. Although a good solution, this may not be a guarantee that your styles will be accepted though as support varies from client to client (see above link). There are some inliners that might help you (Zurb and MailChimp are supposed to be the best).
With Mobile being the new normal for HTML email views, inlining all your styles can create an issue with mobile display. To get around this, the new theory is to design for mobile first, and then use MSO conditional statements and embedded stylesheets to display on desktop clients. (Good article on this approach)
Related
I would like to put my sign up form in my footer of my Laravel app so that it appears on all the pages on footer. I have no idea regarding this. Would appreciate basic sample codes for the controller and the form.
CONTACT FORM
<input type="text" name="email" placeholder="Email" value="{{old('email') }}">
<span class="errors">{{ $errors->first('email') }} </span>
#csrf
<span class="subscribe-button"><input type="submit" value="subscribe" /></span>
</form>
</div>
SubscribeController.php
<?php
namespace App\Http\Controllers;
use App\Mail\SubscribeMail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail
class SubscribeController extends Controller
{
public function create()
{
return view('contact.subscribe');
}
public function store()
{
$data = request()->validate([
'email' => 'required|email',
]);
Mail::to('test#test.com')->send(new SubscribeMail($data));
return redirect('');
}
The subscribe.blade is inside my footer using #include('contact.subscribe')
You are on the right track, keep up! However, you have some issues inside the store function:
public function store(Request $request)
{
$data = $request()->validate([
'email' => 'required|email',
]);
Mail::to('test#test.com')->send(new SubscribeMail($data));
return redirect()->route('home');
}
Anyway, if you are looking to include a sign-up form that appears on all of the pages you should define a layout that has a basic header, footer, and a sign-up form.
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
<footer>
<p>Amazing footer with the sign-up form</p>
<form>
<!-- Inputs -->
</form>
</footer>
</body>
</html>
After that, you can create any number of pages, which should extend your main layout.
<!-- Stored in resources/pages/home.blade.php -->
#extends('layouts.app')
#section('title', 'Home Page')
#section('content')
<p>This is my Home page.</p>
#endsection
Read more about it on official Laravel documentation - https://laravel.com/docs/6.x/blade#defining-a-layout
All of the files are available at http://gist.github.com/tonyahowe -- page.html, app.xql, upload.html, and form1.html. The app:upload function in appxql is at line 378.
I am trying to add an upload feature to my application here (http://nic.cerosia.org) and have been able to get the upload to work without integrating it into the whole application. Once I integrate it, I get a 400 error message, included below. I think the problem might be a controller issue, but I'm not sure?
I have added a simple link from the index to upload.html page, as follows:
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
<form enctype="multipart/form-data" method="post" action="form1.html">
<fieldset>
<legend>Upload Document:</legend>
<input type="file" name="file"/>
<button id="f-btn-upload" name="f-btn-upload" value="true" type="submit" class="btn btn-danger">Upload</button>
</fieldset>
</form>
</div>
That sends the upload file to form1.html, which basically figures out what to do with different form actions (it works with the first two options):
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
<div/>
<!-- if a query search -->
<div data-template="templates:if-parameter-set" data-template-param="query">
<div data-template="templates:include" data-template-path="search.html" class="col-md-12"/>
</div>
<!-- if a coursepack search -->
<div data-template="templates:if-parameter-set" data-template-param="f-btn-coursepack">
<div data-template="templates:include" data-template-path="coursepack.html" class="col-md-12"/>
</div>
<!-- if an upload -->
<div data-template="templates:if-parameter-set" data-template-param="f-btn-upload">
<div data-template="templates:include" data-template-path="success.html" class="col-md-12"/>
<div data-template="app:upload"/>
</div>
</div>
The app:upload is here:
declare function app:upload($node as node(), $model as map(*), $type as xs:string?) {
let $collection := '/db/apps/NiC/inReview/'
let $filename := request:get-uploaded-file-name('file')
(: make sure you use the right user permissions that has write access to this collection :)
let $login := xmldb:login($collection, 'public', 'public')
let $store := xmldb:store($collection, $filename, request:get-uploaded-file-data('file'))
return
<results>
<message>File {$filename} has been stored at collection={$collection}.</message>
</results>
};
I keep getting an error that I think has something to do with the controller, but I'm not sure. Can anyone help me figure out where the problem is? It may also be a templating issue?
Here's the error:
HTTP ERROR 400
Problem accessing /exist/apps/NiC/works/form1.html. Reason:
SAX exception while parsing request: Content is not allowed in prolog.
I don't know for sure, but I wonder if it is an issue with the templating framework reading the data from the request body and then it not being available in your app:upload function.
I wonder if we could test this, perhaps instead of checking for f-btn-upload which will be in the body of the HTTP request, you could instead check for a query-string parameter. If you change your form in the upload.html page to be like this:
<form enctype="multipart/form-data" method="post" action="form1.html?do-upload=true">
and the switch in your form1.html to be like this:
<div data-template="templates:if-parameter-set" data-template-param="do-upload">
Does that help you at all?
This might look useless question, but I'm unable to understand the problem here.
The problems are:
1. When I load the page, first this loads:
And then, after uploading the file:
this page loads:
2. yield('content') is not working. Although #include is working fine.
3. I made master.blade.php, to load the first page of the website. Before it, I was working on the welcome page.But, then changed the work of welcome with the master blade, but when the page gets loaded, it doesn't show anything.
Routes:
Route::get('/',function() {
return view('welcome');
});
Route::group(['middleware' => ['web']], function(){
Route::get('upload',function(){
return view('pages.upload');
});
Route::post('/upload','UploadController#upload');
});
views/pages/upload:
#extends('welcome')
#section('content')
<h2>Upload Files Here</h2>
{!! Form::open(array('url' => '/upload','files'=>true))!!}
{!! Form::file('file') !!}
{!! Form::token() !!}
{!! Form::submit('Upload') !!}
{!! Form::close() !!}
#endsection
views/welcome:
<!DOCTYPE html>
<html lang="en">
<head>
#include('partials._head')
</head>
<body>
#include('partials._nav')
<div class="container">
#include('partials._messages')
#yield('content')
#include('partials._footer')
</div>
#include('partials._javascript')
UploadController/Controllers:
if($request->hasFile('file')){
$file = $request ->file('file');
$fileName = $file->getClientOriginalName();
$destinationPath = config('app.fileDesinationPath').'/'.$fileName;
$uploads = Storage::put($destinationPath,file_get_contents($file- >getRealPath()));
}
return redirect()->to('/upload');
When it's working fine when I used include, to include the upload page in welcome, but the result is like shown in the pictures.Also, When I tried to use the master blade, and exclude the use of the welcome page, by erasing the content of the welcome page, the blank page gets loaded.
What changes do I have to make to make use of master instead of the welcome page? Why are two pages getting loaded? also, why isn't yield('content') not working?
Also, the file which I'm uploading is not getting saved in the public/uploads folder.
Please can anyone help?
Here I need to click $('button-see-more') which triggers an ajax call and loads more stuff on the page. I'm trying with
$link = $crawler->selectLink('See More Products')->link();
$crawler = $client->click($link);
But that ofcourse won't work because it doesn't have any anchor tag.
This is the HTML, the button is actually a element, I want to simulate a click on it
<div class="paging">
<div class="mtl">
<div class="button-see-more txtCenter" data-current-page="1" data-total-pages="3" data-txt-seemore="See More Products" data-txt-loading="Loading More Items for Phones">
<span class="i-loader hidden"></span>
<span class="text">See More Products</span>
</div>
</div>
</div>
How can I do that? Thanks
With crawler you can't detect a link from javascript,
but if you have already an ajax link, you can simulate your request by this method
$crawler = $client->request('GET', '/foo/', array(), array(), array(
'HTTP_X-Requested-With' => 'XMLHttpRequest',
));
I am developing MVC app. with boot strap.
I am trying to put margin for the first name field.
Please check the below image.
Now the problem is Validation message doesn't appear properly.
I want to show the validation message below the first name.
If I used margin more than 20 px then text box come below the label of firstname.
How to do this ?
Below is the code.
<div class="span6">
<div class="editor-label span3">
#Html.LabelFor(model => model.FirstName, "First Name")
</div>
<div class="editor-field span6 InputBoxMargin" style="width:290px; margin-right:20px;">
#Html.TextBox("FirstName",null, new {style = "width:210px;" })
#Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
</div>
</div>
Have you considered using Bootstrap forms? There is a really nice drag and drop builder here. Using forms means the margins are taken care of for you.
Something like
<div class="form-horizontal">
<div class="control-group">
#Html.LabelFor(model => model.FirstName, "First Name")
<div class="controls">
#Html.TextBox("FirstName",null, new {style = "width:210px;" })
<p class="help-block">
#Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
</p>
</div>
</div>
</div>
Edit: For the drag and drop link -
Build your form by dragging/dropping components onto the canvas
click the 'rendered' tab
copy/paste the HTML
et voila!
Should probably take sometime to refer to the Github/docs site to understand why/how it works too.
Please refer the below links. You will get exactly what you want
http://bootsnipp.com/resources
http://twitter.github.io/bootstrap/javascript.html