Letter preview PHP/JQuery - php

I have a set of fields such as title, body, header, footer, signature and so on. When i fill these fields which are sections of a letter, a preview of what is being filled should show as the link given here: http://www.cvplaza.com/wp-content/uploads/2012/09/cover-letter-example.png
I will be developing this using codeigniter and want to know libraries or any other technologies to achieve this. I will also need to set predefined templates for the letter so once i loads them, i can then fill-in details and the preview fill format and show the final draft.

Something like this?
Guess some normal html would suffice, just create a html mockup, including some <address> tags etc (or whatever you want), and use some css to make it look like you want. Nothing special about it...
EDIT
reply on the comment: yes and no, ofcourse you can limit the number of characters or even words, but note that calculating dimensions based on text is nearly impossible. Except for monospace fonts every letter has it's own width, which is based on several variables, amongst others the rendering engine, which depends on the os and even the browser, the font chosen, etc. etc.
Except for if you have a lot of time and/or resources, I'd go with a practical solution. If you do have both, you can dynamically parse pdf files, using, eg. FPDF or TCPDF. Or you can look into dynamically parsing LaTeX, which gives you beautiful results with minimal effort in creating a page layout. But consider; is it worth the trouble?
In case of html and latex, you can create templates the way you would create normal html templates. An example for the template I created in the fiddle would look like this in php:
<div class="letter">
<header>
<div class="sender">
<address>
<?php echo $sender['name']; ?><br/>
<?php echo $sender['address']; ?><br/>
<?php echo $sender['city']; ?><br/>
<?php echo $sender['zip']; ?><br/>
</address>
</div>
<div class="date">
<?php echo $date; ?>
</div>
<div class="recipient">
<address>
<?php // recipient... ?>
</address>
</div>
</header>
<div class="body">
Dear <?php echo $recipient['full_name']; ?><br/>
<br/>
<strong><?php echo $subject; ?></strong><br/><br/>
<?php echo nl2br($message_body); ?>
</div>
</div>

Related

Reusable user interface in PHP?

For most of my projects I make an administration interface, which has the same design for every project. The design of the header, the footer, the topbar, the leftmenu, the css, etc. are always the same. It is a pity to create the views every time; so I was thinking: maybe there would be a nice way to put the admin interface in my MVC library, as it is reused by every project?
But for the moment, in every single view I got code like the following:
<?php $this->_include('/includes/doctype.php'); ?>
<head>
<?php $this->_include('/includes/head.php'); ?>
<title>Some title</title>
</head>
<body>
<?php $this->_include('/includes/topbar.php'); ?>
<div id="page">
<?php $this->_include('/includes/header.php'); ?>
<?php $this->_include('/includes/leftmenu.php'); ?>
<div id="content" role="main">
<h1>Some title</h1>
<p>Blah blah blah.</p>
</div><!-- /#content -->
<?php $this->_include('/includes/footer.php'); ?>
</div><!-- /#page -->
</body>
</html>
Would it be a good idea to extract the custom content from the structure of the interface, and put that structure in my library somehow to make it reusable?
After that how will it be possible to customize the title and the actual menus?
I do this all the time. I have a custom header and footer file that are called at the start and end of every page.
<?PHP
Require("includes/header.php");
...
Require("includes/footer.php");
?>
The header provides a database handle, a datetime string and handles logon, priveleges, logging of pageviews etc.
The footer provides a standard HTML page but includes some systematised variables. It also generates the menu dynamically from the driving database then closes the database connection.
This way when I write code, I don't get mixed up in the HTML and any bugs are easy to find.
I like variables akin to:
$display_scripts - adds extra data in the head section.
$display_onload_scripts - adds onload scripts to body section.
$display_style_sheets - option to include link to additional stylesheets
$display_above_menu - will appear above the menubar. NOT recommended.
$display_below_menu - will appear immediately below the menubar.
$display_one_column - page contents when only one column is to be used
$display_left_column - page contents when two columns used. Left pane.
$display_right_column - page contents when two columns used. Right pane.
$display_footer - appears in footer division.
My main code then just has to generate the appropriate variable. Fundamentally, what you need to do is examine the source of a good age you have produced then replace the stuff you want to change with variables.
Here is a schematised version of the file I use (pseudocode) to give you an idea of how I do it.
// Code here generates the menu from database
// Code here genereates popup alert messages from other users
//permanent links to external style sheets go here.
//You can also select skins here.
<?PHP
echo $display_style_sheets;
echo "<title>".$display_page_title."</title>";
?>
<script type="text/javascript" src="JAVASCRIPT GOES HERE.js"></script>
</head>
<body <?PHP echo $display_onload_scripts;?> >
<div id="page_area" >
<div id="banner">
</div>
<?php
echo $display_above_menu;
if(!$hide_menu){echo $display_menu;} //Insert the menu variable here.
echo $display_below_menu;
?>
<div id="content_area">
<div id="inner_content">
<?PHP
if($display_number_of_columns==1)
{
echo "<div id='onecolumn'>".$display_one_column."</div>"; //I only use this one
}
if($display_number_of_columns==2)
{
echo "<div id='leftcolumn'>".$display_left_column."</div>"; //these are left for legacy support from before I got better at CSS.
echo "<div id='rightcolumn'>".$display_right_column."</div>";
}
echo "<div id='footer'>".$display_footer."</div>"; //just in case - I hardly use it.
echo $display_pop_box; //for user alert messages to other users
?>
</div>
</div>
</div>
<div id="logbox"> Automatic Logout statement</div> //this is called by JS to activate timeouts.
</body>
</html>
<?PHP
$mysqlidb->close();
?>
Sorry it's such a lot of code. The layout allows easy adaptation and makes it simple to find the offending variable if things are not going as expected. There are more elegant solutions but this works well for me and is very fast.

Get specific html content from other site with PHP

I want to try and get the latest movie I checked on the IcheckMovies site and display it on my website. I don't know how, I've read about php_get_contents() and then getting an element but the specific element I want is rather deep in the DOM-structure. Its in a div in a div in a list in a ...
So, this is the link I want to get my content from: http://www.icheckmovies.com/profiles/robinwatchesmovies and I want to get the first title of the movie in the list.
Thanks so much in advance!
EDIT:
So using the file_get_contents() method
<?php
$html = file_get_contents('http://www.icheckmovies.com/profiles/robinwatchesmovies/');
echo $html;
?>
I got this html output. Now, I just need to get 'Smashed' so the content of the href link inside the h3 inside a div inside a div inside a list. This is where I don't know how to get it.
...
<div class="span-7">
<h2>Checks</h2>
<ol class="itemList">
<li class="listItem listItemSmall listItemMovie movie">
<div class="listImage listImageCover">
<a class="dvdCoverSmall" title="View detailed information on Smashed (2012)" href="/movies/smashed/"></a>
<div class="coverImage" style="background: url(/var/covers/small/10/1097928.jpg);"></div>
</div>
<h3>
<a title="View detailed information on Smashed (2012)" href="/movies/smashed/">Smashed</a>
</h3>
<span class="info">6 days ago</span>
</li>
<li class="listItem listItemSmall listItemMovie movie">
<li class="listItem listItemSmall listItemMovie movie">
</ol>
<span>
</div>
...
There are some libraries which could help you!
One I've used for the same purpose, a long time ago, is this: http://simplehtmldom.sourceforge.net/
I hope it help you!
follow steps to achieve this
STEP1:-
First get the contents using file_get_contents in a php file
ex: getcontent.php
<?php
echo file_get_contents("http://www.icheckmovies.com/movies/checked/?user=robinwatchesmovies ");
?>
STEP2:-
CALL the above script using ajax call and add the content to a visibility hidden field in the html.
ex:
$('#hidden_div').html(response);
html:-
<html>
<body>
<div id='hidden_div' style='visibility:hidden'>
</div>
</body>
</html>
STEP3:-
now extract the id what ever you want.
What you are asking for is called as web scraping ,I have done this a few months back, the process goes like this,
Make a HttpRequest to the site from which you need the content,check
the php class for it
Use a DOM parse library for handling the downloaded page (it would be in html),simple HTLM DOM would be a good choice
Extract your required information
Here are some tutorials for you,
HTML Parsing and Screen Scraping with the Simple HTML DOM
Library
Beginning web page scraping with php
SO Posts:
HTML Scraping in Php
And best of all Google is your friend just search for "PHP scraping"

Editing certain parts of page template in User mode

I have a web page I am working on in WP which needs some customization.
Firstly I have created a page template that will be used over and over again, only changing parts of the content. I am wondering about available options for me when enabling this fact, through the Admin panel in the HTML Editor(if possible)...
Hope my question is clear enough for you all.
Let me add some code to show what I am trying to accomplish.
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
//This is what i want to be able to edit
</div>
<div id="features">
//This is what i want to be able to edit
</div>
</div>
Dino:
There are lots of ways you could do this. The main question I would ask you is, who is going to be adding/editing this content? If you're going to have a community of people adding content, the input needs to be stripped and sanitized (to avoid injecting tags or other harmful content). If its just going to be you, then here's the easiest/fastest solution:
Use custom fields. If you can't see them in the post/page edit screen, go to the little tab on the top right of the post-edit screen that says Screen Options (or something like that) and click "Custom Fields".
Once you can see the Custom Fields edit box, you can add as many fields as you want. These are stored as post meta data. You can use the <?php the_meta(); ?> function in the loop to display all of your custom fields.
You can access a specific field by using get_post_meta(). You pass in the postID and the key of the meta field:
<?php echo get_post_meta(get_the_ID(), 'my_key'); ?>
So, for your example, you would add in the post-edit screen:
about: Some text to go in the about section.
features: Some text to go in the features section.
Then, you would access these on your page like so:
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
<?php echo get_post_meta(get_the_ID(), 'about'); ?>
</div>
<div id="features">
<?php echo get_post_meta(get_the_ID(), 'features'); ?>
</div>
</div>

Display certain HTML in an Automatically generated PHP page?

How can I display a certain HTML code in a php generated page.
For example, php will automatically display the name and category of an item, yet I want to add custom pictures to this generated page. Is there any way to do this without creating a separate HTML page to include into the generated page?
I'm hoping for something like a database entry where to add the html part to display. Is it possible?
ps. Sorry if I didn't express my idea in a completely understandable way.
Store the image URLs just like you are storing the names and categories. Then you would just do something like:
<span id="name"><?= $name ?></span>
<span id="category"><?= $category ?></span>
<img src="<?= $image ?>" />
Maybe you need to clarify - why do you need different HTML for each page, if the only thing changing are the images?
Keep in mind here I use <?= $foo ?> which is generally considered bad practice, and is just shorthand for <?php echo $foo; ?>.
Just wrap the PHP in your HTML:
<h1>My Test</h1>
<?= $myCategory; ?> - <?= $myItem; ?>
<img src ="mySource" alt="myImg" width="15" height="15" />
This also works for your HTML in your Database:
<p><?= $myDatabaseHTMLContent ?></p>
Cheers,
Max
<?php
//Your php code
?>
<img src="" />
<?php
//Your php code
?>
You can put html in a php file, like the example above.

How would I properly insert this PHP into an <a> tag's title?

I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.
My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty
Ok, as we understand what you are trying to do. Lets get some things clear.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".
So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>">Related Articles</p>
Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:
<p class="related_articles" title="<?= the_field(related_articles_1_title) ?>">Related Articles</p>
However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.
Use the short form if your server supports it:
<?=the_field(related_articles_1_link)?>
or else, you should echo it:
<?php echo the_field(related_articles_1_link); ?>
<p class="related_articles" title="<?php echo htmlspecialchars(''. the_field(related_articles_1_title) .''); ?>">Related Articles</p>
While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.
I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html
Is it possible that this is what you want?
<p class="related_articles">
Related Articles:
<a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
</p>
Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:
<p class="related_articles">Related Articles</p>
<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
Javascript:
$('.related_articles').tooltip();
The reason this works:
The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).
Given that you are placing html content inside an HTML property it should be escaped. As mentioned by #Karolis do this:
<p class="related_articles" title="<?php echo htmlentities(''.the_field(related_articles_1_title).''); ?>">Related Articles</p>
This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js
which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:
<?php
// Generate complete tootltip content
$tootltipContent = ''.the_field(related_articles_link_1).'';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('##','##','\"');
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>
Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:
tooltipContent = tooltipContent.replace('##','<').replace('##','>').replace('\"','"');

Categories