Tag Archives: PHP

Bootrap Jumbotron into WordPress Theme

In this post I will use a bootstrap Jumbotron template,here is the link http://getbootstrap.com/examples/jumbotron/  I will  customize it into wordpress theme

You need download bootstrap into” yourtheme “folder, whatever theme name you like to call it.

bootstrap_to_wordpress2

 

Those fold should inside your theme folder, don’t worry what are inside it except everything from bootstrap, the other file is empty now.

1) for wordpress could read you theme you need put those on top of your style.css:

/*
Theme Name: Bootstrap to WordPress
Theme URI: http://sandywebdesigner.com
Author: Sandy Zhang
Author URI: http://sandywebdesigner.com
Description: Example theme for  how to convert static Bootstrap site into dynamic WordPress theme
Version: 1.0
License:
License URI:
Text Domain: bootstrap-to-wp

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
.admin-bar .navbar-fixed-top {
margin-top: 30px;
}
/* Below is the style for navigation in functions.php add a class to sub-menu to the navigation so I just write a simple style to it,you could customize it by yourself */
@media (min-width:768px) {
.sub-menu {
display: none;
position: absolute;
background: #222;
padding: 10px 15px;
width: 150px;
}

li:hover .sub-menu {
display: block;
}

}

.sub-menu li {
margin-bottom: 10px;
list-style: none;
}

.sub-menu li:last-child {
margin-bottom: 0;
}

.sub-menu a  {
color: #999;
text-decoration: none;
}

.sub-menu a:hover  {
color: #fff;
}

.current-menu-item > a, .current-menu-parent > a {
background: #000;
}
.current-menu-parent li a {
background: inherit;
}
.current-menu-parent .current-menu-item a {
color: #fff;
font-weight: bold;
}

.sidebar{
margin-top:40px;
color:#444;
}
.sidebar h3{
color:#888;
}
.widget{
margin:10px 0 30px;
}
article .post{
margin:20px 0;
}

.featured-image img,
.portfolio-piece img,
.portfolio-image img {
max-width:100%;
}

.prev-next{
font-size:24px;
margin-top:30px;
text-align:right;
}

@media (max-width:540px) {
.portfolio-piece h4{
font-size:.8em;
}
.prev-next{
font-size:15px;
margin-top:15px;
text-align:right;
}

}

2)header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’);?>/images/favicon.ico”>

<title>
<?php wp_title(‘|’,true,’right’);?>
<?php bloginfo(‘name’)?>

</title>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
</div>
<div class=”navbar-collapse collapse”>
<?php
$args = array(
‘menu’ => ‘mainmenu’,
‘menu_class’ => ‘nav navbar-nav’,
‘container’ => ‘false’
);
wp_nav_menu($args);
?>
</div><!–/.navbar-collapse –>
</div>
</div>

3)footer.php

<hr>

<footer>
<p>&copy; <?php bloginfo(‘name’);?> <?php echo date(‘Y’); ?></p>
</footer>
</div> <!– /container –>
<?php wp_footer(); ?>
</body>
</html>

3)index.php

<?php get_header(); ?>

<div class=”container”>

<div class=”row”>
<div class=”col-md-9″>
<?php if(have_posts()):while(have_posts()):the_post();?>
<div class=”Page-header”>
<h1><?php the_title(); ?></h1>
</div>
<?php the_content();?>
<?php endwhile; else:?>

<div class=”Page-header”>
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php the_content();?>

<?php endif;?>

</div>
<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

4)functions.php

<?php
function theme_styles(){
wp_enqueue_style( ‘bootstrap_css’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
wp_enqueue_style( ‘main_css’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );

function theme_js(){
global $wp_scripts;
wp_register_script( ‘html5_shiv’, ‘https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&#8217;, ”, ”, false );

wp_register_script( ‘respond_js’, ‘https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&#8217;, ”, ”, false );

$wp_scripts->add_data( ‘html5_shiv’, ‘conditional’, ‘lt IE 9’ );
$wp_scripts->add_data( ‘respond_js’, ‘conditional’, ‘lt IE 9’ );
wp_enqueue_script( ‘bootstrap_js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(‘jquery’), ”, true );
wp_enqueue_script( ‘theme_js’, get_template_directory_uri() . ‘/js/theme.js’, array(‘jquery’,’bootstrap_js’), ”, true );

}

add_action( ‘wp_enqueue_scripts’, ‘theme_js’ );

add_theme_support(‘menus’);
add_theme_support(‘post-thumbnails’);

function register_theme_menus() {
register_nav_menus(
array(
‘header-menu’    => __( ‘mainmenu’ )
)
);
}
add_action( ‘init’, ‘register_theme_menus’ );

function create_widget( $name, $id, $description ) {

register_sidebar(array(
‘name’ => __( $name ),
‘id’ => $id,
‘description’ => __( $description ),
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’
));
}

create_widget( ‘Front Page Left’, ‘front-left’, ‘Displays on the left of the homepage’ );
create_widget( ‘Front Page Center’, ‘front-center’, ‘Displays in the center of the homepage’ );
create_widget( ‘Front Page Right’, ‘front-right’, ‘Displays on the right of the homepage’ );
?>

See how simple it is, index.php you completed, then use this index.php to create other template like page.php. single.php, etc. Have fun!

 

 

 

 

 

 

Advertisements

How to customize your own WordPress Theme

Once you could write HTML and CSS website template, then you will be able to customize it to

WordPress Theme.

For to do that, there is some basic thing you need know:

1)Need understand WordPress Template Hierarchy, if you don’t knwo before, don’t scare.
Here is few template you must have in your theme folder.

Index.php //  main Theme templateindex.php
page.php //this is the static page template in wordpress
single.php //this is post page template
home.php // blog template
front-page.php//shown On front
archive.php// for archive page template
search.php// if you don’t have wordpree will use index.php

For more detail could go to http://codex.wordpress.org/Template_Hierarchy

2) WordPress cut page into pieces, so onece you have the html and css page, then slide it into
header.php, footer.php, sidebar.php(if you design have sidebar)

3)Here is the basic function you need it.
The path of style.css is: <?php bloginfo( ‘stylesheet_url’ ); ?>
The path of the theme folder: <?php bloginfo(‘template_directory’); ?>
<?php get_header();?> //this is for you get your header
<?php get_footer();?> // this is for you get your footer
<?php get_sidebar();?> //this is for you get your sidebar, if you have sidebar in your design

<?php if(have_posts()):while(have_posts()):the_post();?>
<?php endwhile; else:?>//this loop is very important,will be use for a lot of times when you

create a wordpress theme

In next post I will use a bootstrap Jumbotron template,here is the link http://getbootstrap.com/examples/jumbotron/  I will  customize it into wordpress theme

Zend Framework2: Tutorial Part4: Building a CRUD app by using Table Gateway2

 Here you have your form fold, the file stuction should look like this:

crud4

here is the code for userForm.php

<?php
namespace CsnUser\Form;

use Zend\Form\Form;

class UserForm extends Form
{
public function __construct($name = null)
{
parent::__construct(‘user’);
$this->setAttribute(‘method’, ‘post’);

$this->add(array(
‘name’ =>’usr_name’,
‘attributes’=> array(
‘type’=>’text’,
),
‘options’=>array(
‘label’=>’Username’,
),
));

$this->add(array(
‘name’ =>’usr_password’,
‘attributes’=> array(
‘type’=>’password’,
),
‘options’=>array(
‘label’=>’Password’,
),
));

$this->add(array(
‘name’ =>’usr_email’,
‘attributes’=> array(
‘type’=>’email’,
),
‘options’=>array(
‘label’=>’E-mail’,
),
));

$this->add(array(
‘name’ =>’usrl_id’,
‘type’=>’Zend\Form\Element\Select’,
‘options’=>array(
‘label’=>’Role’,
‘value_options’=>array(
‘1’=>’Public’,
‘2’=>’Member’,
‘3’=>’Admin’,
),
),
));

$this->add(array(
‘name’ =>’lng_id’,
‘type’=>’Zend\Form\Element\Select’,
‘options’=>array(
‘label’=>’Language’,
‘value_options’=>array(
‘1’=>’English’,
‘2’=>’French’,
‘3’=>’German’,
),
),
));

$this->add(array(
‘name’ =>’usr_active’,
‘type’=>’Zend\Form\Element\Select’,
‘options’=>array(
‘label’=>’Active’,
‘value_options’=>array(
‘0’=>’No’,
‘1’=>’Yes’,

),
),
));

$this->add(array(
‘name’ =>’usr_question’,
‘attributes’=> array(
‘type’=>’text’,
),
‘options’=>array(
‘label’=>’Question’,
),
));

$this->add(array(
‘name’ =>’usr_answer’,
‘attributes’=> array(
‘type’=>’text’,
),
‘options’=>array(
‘label’=>’Answer’,
),
));

$this->add(array(
‘name’ =>’usr_picture’,
‘attributes’=> array(
‘type’=>’text’,
),
‘options’=>array(
‘label’=>’Picture URL’,
),
));

$this->add(array(
‘name’ =>’usr_picture’,
‘attributes’=> array(
‘type’=>’text’,
),
‘options’=>array(
‘label’=>’Picture URL’,
),
));

$this->add(array(
‘name’ => ‘usr_password_salt’,
‘attributes’ => array(
‘type’  => ‘text’,
),
‘options’ => array(
‘label’ => ‘Password Salt’,
),
));

$this->add(array(
‘name’ => ‘usr_registration_date’,
‘attributes’ => array(
‘type’  => ‘text’,
),
‘options’ => array(
‘label’ => ‘Registration Date’,
),
));

$this->add(array(
‘name’ => ‘usr_registration_token’,
‘attributes’ => array(
‘type’  => ‘text’,
),
‘options’ => array(
‘label’ => ‘Registration Token’,
),
));

$this->add(array(
‘name’ => ‘usr_email_confirmed’,
‘type’ => ‘Zend\Form\Element\Select’,
‘options’ => array(
‘label’ => ‘E-mail was confirmed?’,
‘value_options’ => array(
‘0’ => ‘No’,
‘1’ => ‘Yes’,
),
),
));

$this->add(array(
‘name’ => ‘submit’,
‘attributes’ => array(
‘type’  => ‘submit’,
‘value’ => ‘Go’,
‘id’ => ‘submitbutton’,
),
));
}
}

here is the code for userFilter.php(you could use javascript like backbone to validate the form instead will more faster)

<?php
namespace CsnUser\Form;

use Zend\InputFilter\Factory as InputFactory;
use Zend\InputFilter\InputFilter;

class UserFilter extends InputFilter
{
public function __construct() {
$this->add(array(
‘name’=>’usr_name’,
‘required’=>true,
‘filters’=>array(
array(‘name’=>’StripTags’),
array(‘name’=>’StringTrim’),
),
‘validators’=>array(
array(
‘name’    => ‘StringLength’,
‘options’ => array(
‘encoding’ => ‘UTF-8’,
‘min’      => 1,
‘max’      => 100,
),
),
),
));

$this->add(array(
‘name’       => ‘usr_email’,
‘required’   => true,
‘validators’ => array(
array(
‘name’ => ‘EmailAddress’
),
),
));

$this->add(array(
‘name’     => ‘usr_password’,
‘required’ => true,
‘filters’  => array(
array(‘name’ => ‘StripTags’),
array(‘name’ => ‘StringTrim’),
),
‘validators’ => array(
array(
‘name’    => ‘StringLength’,
‘options’ => array(
‘encoding’ => ‘UTF-8’,
‘min’      => 6,
‘max’      => 12,
),
),
),
));

$this->add(array(
‘name’     => ‘usr_active’,
‘required’ => true,
‘filters’  => array(
array(‘name’ => ‘Int’),
),
‘validators’ => array(
array(
‘name’    => ‘Digits’,
),
),
));

}

}

the index.phtml code:for retrieve data from your database, here is your presentation page, on you browser type:http://zf2.local/csn-user/user/index

should look like this:

crud3

 

<h1>Index = Retrieve</h1>
<a href=”<?php echo $this->url(‘csn_user/default’, array(‘controller’ => ‘user’, ‘action’ => ‘create’)); ?>”>Create</a>
<table>
<tr>
<th>usr_id</th>
<th>usr_name</th>
<th>usr_email</th>
</tr>
<?php
foreach ($rowset as $row) {
?>
<tr>
<td><?php  echo $row->usr_id; // The row is an ArrayObject $row->usr_id and $row[‘usr_id’] with both work?></td>
<td><?php  echo $row[‘usr_name’]; ?></td>
<td><?php  echo $row[‘usr_email’]; ?></td>
<td><a href=”<?php echo $this->url(‘csn_user/default’, array(‘controller’ => ‘user’, ‘action’ => ‘update’, ‘id’ => $row[‘usr_id’])); ?>”>Edit</a></td>
<td><a href=”<?php echo $this->url(‘csn_user/default’, array(‘controller’ => ‘user’, ‘action’ => ‘delete’, ‘id’ => $row[‘usr_id’]));?>” onclick=”return confirm(‘Do you rely want to delete the record?’)”>Delete</a></td>
</tr>
<?php
}
?>
</table>

your update.phtml code:

<h1>Update</h1>
<?php
$form = $this->form;
$form->prepare();
$form->setAttribute(‘action’,$this->url(‘csn_user/default’, array(‘controller’ => ‘user’, ‘action’ => ‘update’, ‘id’ => $id)));
$form->setAttribute(‘method’,’post’);

echo $this->form()->openTag($form);
echo $this->formCollection($form);
echo $this->form()->closeTag();

your create.phtml code:

<h1>Create an new user</h1>
<?php
$form = $this->form;
$form->prepare();
// Assuming the “contact/process” route exists…
$form->setAttribute(‘action’, $this->url(‘csn_user/default’, array(‘controller’ => ‘user’, ‘action’ => ‘create’))); //’contact/process’));
// Set the method attribute for the form
$form->setAttribute(‘method’, ‘post’);

echo $this->form()->openTag($form);
echo $this->formCollection($form);
echo $this->form()->closeTag();

And you don’t need a delete view

 

Zend Framework2: Tutorial Part4: Building a CRUD app by using Table Gateway1

The previous post I already wrote how to add a references to the databases connection, this post I will tell you how to building a CRUD app.

First, create a new module named “CsnUser”, or just copy the entire “Application” fold, and change the name to “CsnUser” .

then you file struction should look like this.

crud1

Second, go to open your Module.php

Here is the code:inside it quick just standard proceed, just tell where is the config file and  the namespace’s path.

<?php

namespace CsnUser;//this namespace must match your module’s name

class Module
{
public function getConfig()
{
return include __DIR__ . ‘/config/module.config.php’;
}

public function getAutoloaderConfig()
{
return array(
‘Zend\Loader\StandardAutoloader’ => array(
‘namespaces’ => array(
__NAMESPACE__ => __DIR__ . ‘/src/’ . __NAMESPACE__,
),
),
);
}

}

Continue reading Zend Framework2: Tutorial Part4: Building a CRUD app by using Table Gateway1

Zend Framework2: Tutorial Part2: Hello World Module Application

The reason I start to write this post, because I read saw a lot video on youtube.com take hours to tell you how do it. And I also follow it but it is waste my time. Didn’t work for me. And I write this as my study record also hope that could help someone to start Zend Framework2.

Actually it is very simple,

First,copy the entire “Application file” and rename it to “Hello” (You could just rename the “Application” to “Hello” or any name you like, but under this file those three name must match )

HelloModuleZendFrameWork

Second, open the “Module.php”, the namespace Hello (this namespace should match your module name).

Continue reading Zend Framework2: Tutorial Part2: Hello World Module Application

Tips for use Drupal

Tip1: After install new module,should go Administration › People › Permissions, set permission, otherwise won’t work.

Tip2: Drupal built a lot of caching mechanism to improve performance, but in a development environment, it is best to turn off all to see the results of the fastest changes.

Into the background

administer -> configuration -> perfromance 

Will

  • Cache pages for anonymous users
  • Cache blocks

Are unchecked.

In addition, to make the theme changes take effect immediately, you need to at the top of the theme template.php join

drupal_theme-rebuild();

Tip4: Avoid modifying Drupal core files

In the file structure of Drupal modules and themes can be installed in drupal / modules , drupal / themes , it is also possible to install in drupal / sites / all / modules , drupal / sites / all / themes under. Recommended to choose the latter, which is the official recommended. Because this way, you can modify the project focused on the sites directory when upgrading Drupal version, you can cover all the core files directly without having to have another worry.

Of course, since the Drupal web root directory is set in the root directory of the code, from a security point of view, then pay attention to the library may be accessed files, so you can control what file permissions in addition to sites outside the directory.

Tip5:error when processing Drupal

Since  Drupal has error handling php, when there was error occurs, the screen will appear

The website encountered an unexpected error. Please try again later.

Generally , you can go Administration › Reports › Recent log messages, view the error message.

But sometimes occurred if the situation worse, such as the installation of some modules may report the above error and you can’t access the back control.

So then you can go check watchdog, variables field holds this error message, you can notepad to  open it to see the error details (which you need Database logging module).

Zend Framework2: Tutorial Part1:Teaching you step by step install Zend Framework under window 8 system

Since Zend Framework is very popular, so I decided to install it in my local server to use it. Install Zend Framework is similarly like your install another PHP Framework.

1) go to here download the sample programmer, below is the link

https://github.com/zendframework/ZendSkeletonApplication

2)Unzip to your local hosting my is C:\ xampp \ htdocs and rename ZendSkeletonApplication

3)go to below link to download the latest version, I just download Zend Framework 2.2.5 Full

http://framework.zend.com/downloads/latest

4)unzip it and put it under the vendor file

the path in my computer is like this:

zfDirection

C:\xampp\htdocs\ZendSkeletonApplication\vendor\ZF2

The direction should look like this:

4) Now we need to binding domain

go to here:C:\Windows\System32\Drivers\etc

use notePad to open the file:hosts

Add two line below it:(you actually could change to another name you like it,since this use Zend Framework version 2 and under local host ,so I just named like this for easy remember it).

127.0.0.1       zf2.local
127.0.0.1       http://www.zf2.local

Now,you could access http://zf2.local testing has become effective.

5)Edit the Apache configuration file,I just go to C:\xampp\apache\conf\extra , use notePad open httpd-vhosts.conf

Add this to it:

<VirtualHost *:80>
ServerName localhost
DocumentRoot “C:\xampp\htdocs”
</VirtualHost>

<VirtualHost *:80>
ServerName zf2.local
ServerAlias http://www.zf2.local
DocumentRoot “C:\xampp\htdocs\ZendSkeletonApplication\public”
</VirtualHost>

restart the Apache service. In the browser to re-visit http://zf2.local can open ZendSkeletonApplication test program.

Now you could start programming now.

Here have some option set,not necessary.

1) Adjust the level of error messages,go to C:\ xampp \ php \ php.ini

a)change this error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT to error_reporting=E_ALL & ~E_STRICT

b)PHP by default is use short_open_tag=off, now you could change to short_open_tag = On

c) write 2 lines below the finle

extension= php_intl.dll
extension= php_openssl.dll

Cakephp Blog Tutorial 1 – Installation

1. download the latest version cakePHP,

2. copy into localhost root file, and I name it as “Blog”

3. There are 3 things need to fix it out:

First is connect to your databases:

A) Database configuration (make sure have a  database in your localhost)

B) use NetBeans to open your files,under the App file, under config file, you see a database.php.default,rename it and move .default, and open it

C) here you could set your database, there are class you should change it like this

public $default = array(
‘datasource’ => ‘Database/Mysql’,
‘persistent’ => false,
‘host’ => ‘localhost’,
‘port’ => ”,
‘login’ => ‘root’,//I use localhost, so I set it root
‘password’ => ‘*******’,//here put your password
‘database’ => ‘blog’,//choose your databases
‘prefix’ => ”,
‘encoding’ => ‘utf8’,
);

Second,config your salt

under app/config/core.php, open core.php file,find your Security.salt, then go to google type:random strings, click GRC,copy the string to replace it into your file,should look like below:

Configure::write(‘Security.salt’, ‘dVYSYFEl2wYaF5FXSKhFmhGSXBGLmFeyczLUaH4IX8qIKZqo03aasw2jTmcjRP7’);

Third, Debug is optional but I think that it is good have it.

Down load it from cakePHP website name debug_kit-master file put it under your plug file

open bootstrap.php uncommon this statement.

CakePlugin::load(‘DebugKit’); //Loads a single plugin named DebugKit