Webpage design in blogger : Setup new theme using customized template

Webpage design is an arrangement of objects like content, images, sounds and videos etc. Contents, included in any web page is the killer part of the page. In this article, we will learn webpage design in blogspot and also learn how to setup a new theme in blogger using customized template. 
Here're some steps for webpage design , these are:

Step-1 : Open http://www.blogger.com (before doing this please login to your google account)

Step-2 : Select New Blog button In left pane.

Step-3 : Both title and Address fields are required in blogger (think before writing that  your webpage address directly show the written articles). Select given template (simple, dynamic views, Picture Window etc.) and click to "Create blog"  button.

Step-4 : Select overview in Drop-down menu. Now you will see after selecting  (post, Pages, Comments, Google+, Stats, Earning, Layout, Template and Settings)

Post/Page: You can write article using post and page with proper management.

Comments: User can give his/her own feedback to articles.

Google+: Share your published article on G+.

Stats: Check your website performance like  Page Views , visitors location , pie chart etc.

Earning: Generate revenue and make money online.

Layout: Demonstration of the theme.

Template: Theme of blog (you can take backup of the template, also upload new template) .

Setting: Change your blog name, blog description, blog language, redirection, enable or disable permission using blog setting.

Step-5 : Select post in given toolbar.

Step-6 : Write quality post for best SEO (Search Engine Optimization) blog and click to publish button.

Step-7: Check your blog by click "view blog" button or directly you can run your blog with proper url. For example http://blog-name.blogspot.com/

In the next article i will let you know about to setup new theme in your blogger account.

Windows 8 App Development: How to use HyperlinkButton in c# code file

In my previous article, i have discuss hyperlinkbutton with XAML code in windows 8 app development. In this article i will explain use this button in c# code file. Write the below code in specified file:

XAML CODE

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     
<HyperlinkButton x:Name="h1" Height="200" Width="257" Content="Microsoft Development Network" Margin="90,20,0,548" Click="h1_Click" />
    </Grid>
</Page>

CODE FILE

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App4

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

            //BitmapImage img = new BitmapImage();

            //img.UriSource = new Uri(this.BaseUri,"Image/youtube.png");

            //Image1.Source = img;

            List<string> lit = new List<string>();

            lit.Add("Apple");

            lit.Add("Apple");

            lit.Add("Apple");

            lit.Add("Apple");

            //l1.ItemsSource = lit;           

        }

        private void h1_Click(object sender, RoutedEventArgs e)

        {

            Uri uri = new Uri("http://www.msdn.microsoft.com");

            h1.NavigateUri = uri;            

        }    

    }

}
In the above c# code, look out the click event of hyperlinkbutton h1, i have created an object of Uri class with the link as a constructor's parameter. And then set the property NavigateUri  to the object defined above. When user will click on this button, it will redirect programmer to the specified page.

OUTPUT

First image shown the hyperlinkbutton created by the c# code, when programmer will click on that button, it will redirect on the msdn page, shown in the second image. The second image shows the latest feature in windows 8 app development as it is redirecting programmer and both the pages are side by side.

How to add Styles to an HTML Document

Introduction

Rules can be applied to an HTML document in three ways, as inline style directions, as a style element embedded in the head section of HTML file and as an external file that can be either linked to or imported into document.

Inline styles

Style information can be added to an individual element by adding style attribute within HTML tag of that element. Value of style attribute is one or more standard style declarations, as shown here:

html page code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 

    <title></title>

</head>

<body><div style="font-size: large; font-weight: bolder; font-style: normal; color: #FF0000; background-color: #FFFF00">

    Hello World

    </div>

</body>

</html>

Although a perfectly valid use of style information, inline styles are equivalent to <font> tag in the "pollute" document with presentation information. Style information is still tied to each individual content element and any changes would need to be made in every file, rather than globally. Inline styles are best used to override higher-level styles.

Embedded style sheet

A more compact method for adding style sheets is to embedding a style block, in the top of HTML document, using the <style> element. Following example shows sample rules embedded in a HTML document:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <style>

        h1 {

            font-size :x-large;

        }

        .inner {

            color:orange;

            background-color :green;

        }

    </style>

    <title></title>

</head>

<body><div class="inner">

    <h1>Hello World</h1>

    </div>

</body>

</html>

Output of the code is :

<style> element must be placed within <head> tag in the document. It is usually necessary to place HTML comment tags (<!-and->) around the <style> contents. This hides style information from browsers that don’t understand the <style> tag (otherwise, they could display the rules as text in browser window).

Currently, Cascading Style Sheets (CSS) are the style sheet language only, but the W3C has prepared for possibility of additional languages to be added in the future by providing type attribute within the <style> element. Only viable style type as of this writing is text/css. If the type attribute some browsers may ignore entire style sheet.

External style sheet 

The powerful way to use styles is to collect them all in a separate text document and create links to that document from all HTML pages in a site. In this way, you can make stylistic changes consistently across a whole site by editing style information in a single document. This is a powerful tool for large-scale sites.

These are two ways to refer to external style sheets from within an HTML document.

1. Linking. The most standard and best-supported method is to create a link to that document using <link> tag  in <head> of document as shown here:

<link href="StyleSheet.css" rel="stylesheet" />

The rel attribute defines linked document’s relation to the current document- a “style sheet”. The href attribute provides URL to the file containing style sheet information.

Style sheet document is a simple text document that contains a collection of style sheet rules. It may not contain HTML tags, particularly structural tags that set up an HTML document (<head>, and <body>).

Style sheet. css file 

body {

    background-color :black;

}

.fontclass {

    color :white ;

    font-size :medium;

}

.html file

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link href="StyleSheet.css" rel="stylesheet" />

    <title></title>

</head>

<body><div class="fontclass">

    <h1>Hello World</h1>

    </div>

</body>

</html>

Output File 

2. Importing. An alternative to linking is to import external style sheets into <style> element using <style> the @import function as shown:

First Stylesheet.css file code 

@import url(StyleSheet2.css);

.fontclass {

    color :white ;

    font-size :medium;

}

Second Stylesheet.css file code

body {

    background-color :green;

}

Advantage to importing is, multiple style sheets can be applied to same Document (only one style sheet can be “linked” to a document). When additional import functions are added within <style> element, style information from the last file read (the one at the bottom of the list) will take precedence over previous ones.

Major drawback to import is limited browser support (it is currently only supported by Internet Explorer 4.0).

Conditional If-Else Statement with Example: Turbo C

To overcome the disadvantage of if statement, in computer programming the if-else statement is introduced. It is a two way decision statement which executes either first statement (or block of statements) or second statement (or block of statements) based on the condition.

For the true part if takes care and for the false part else takes care. The syntax of if-else statement along with equivalent flow chart is shown below:

if (condition)
 statement 1 or (block of statement 1)
else
 statement 2 or (block of statement 2)

According to Flowchart, compiler will first check the condition. If the condition is true, the right side of statement(s) will execute otherwise left side of statement(s) will execute. For example 

Program to check whether the number is even or odd: Let num is the given number. After dividing num by 2, if the remainder is zero, then the given number num is even otherwise, given number num is odd. The equivalent statement can be written as:

if (num%2==0)
    Write: “Number is Even”
else
    Write: “Number is odd”
[End of if]

Algorithm:

Step 1: [Read the number to check]
              Read: NUM
Step 2: [Check the number]
              if(NUM%2==0)
                    Write: ‘Number is Even’
              else
           Write: ‘Number is Odd;
    End of if
Step 3:  Exit

The C program to perform the algorithm:

main()
{
   int num;
   printf(“Enter an integer number here:”);
   scanf(“%d”,&num);
   if(num%2==0)
      printf(“The number num %d is EVEN”,num);
   else
      printf(“The number num %d is ODD”,num);
   getch();
}

Nested-If statement

Branching Statements in Turbo C Language

In sequential statements, we know that all the statements are executed in the order specified in the program one after one. However, computer can skip execution of some statements those statements will not be execute by the compiler. This skipping feature is provided by the a set of instructions called skip instructions. These skip instructions are further called Branching Statements in technical words.

In other words the statements that alter/change the sequence of execution of the instructions, written in a program, are called branching statements. These statements or skip instructions have its own types. I will describe types of branching statement in brief:

Conditional Statements

The written instructions can be skipped based on a condition specified by the programmer. The branching statements that alter the sequence of execution of the program based on some condition are called conditional branching statements. They can also be called Selection Statements or Decision Statements.
For example, if, if-else, else-if ladder and switch statement.

Non Conditional Statements

Sometimes, user wants to transfer the control from one point to another point during execution without any condition. These type of branching statements that transfer the control from one point to another point in a program without any condition are called unconditional branching statement or unconditional control statements.
For example, goto, break, return and continue. We will understand all these statements with example.

If Condition

If or If statement is a simple selection or decision statement. When a set of statements have to be executed or skipped according to the given condition, this statement is used. Here's the syntax and flowchart of this statement:

If (Condition)
statement;
rest of code;

According to Flowchart, compiler will first check the condition. If the condition is true, the block of statements will execute otherwise rest of code will execute. For example
if(num%2==0)
Write: ‘Even Number’
End if

Here, "Even Number" is displayed only if the condition is true. Now, let us write some simple programs that shows the application where if-statement can be used.

Program to check whether the given number is even or not.
Process: Let num is the given number. After dividing num by 2, if the remainder is equals to zero, then num will be even number. So, the equivalent algorithm and C language code is written here.

Algorithm:
Step 1: [Read the number to check]
              Read: NUM
Step 2: [Check the number]
            if(NUM%2==0)
                    Write: ‘Number is Even’
            End of if
Step 3: Exit

The C program to perform the algorithm
main()
{
   int num;
   printf(“Enter an integer number here:”);
   scanf(“%d”,&num);
   if(num%2==0)
   printf(“The number num %d is EVEN”,num);
   getch();
}

Advantage

If statement is one way decision statement. The if statement is used when a set of statements have to be executed or skipped based on one condition. That is only when the condition is true or false.

Disadvantage

If we have two statements to be executed, one on true and another on false, then if statement is not recommended. This disadvantage can be overcome using two way decision statement i.e. if-else statement.

All-in-One Language Editor with PHP, HTML, CSS, JS: Codelobster PHP Editor

About

Codelobster, Well-Known IDE Developers, delivers editing, debugging, deployment and many other website creation functions. It provides a solid PHP development environment with debugging and IntelliSense, php developer will have a great experience with available features. This IDE also provide some plugins for for web developers.

PHP Editor

There are many PHP editor products in the market, having limited features. This product have all standard abilities to operate with code.

Here’re some important features of Codelobster PHP Editor:

• Auto-Complete: Programmer don’t need to remember every line of code, when working on this editor. Its intelligent auto-complete feature enables programmers to write code faster and more efficient. It will open a pop-up window to detect the entered characters like google search. The features is available for HTML, PHP, CSS, SQL and JavaScript including the latest versions.
• Navigation: Navigation feature provides let the user redirect on the helping page, pressing only CTRL + click. If programmer want to know the meaning/description about any in-built word, then he/she can simply hold ctrl + click on that, and it will open a browser with help options.
• Code Highlighting: The very innovative feature, only included in some of the IDE as this have. This feature provides some of the colour schemes through which programmer can identify the coding language. In Codelobster editor each language will be highlighted as it is like, PHP as PHP.
• Pair Highlighting: will highlight the relative starting/ending tag. For example place the cursor on <table> (starting tag), and it will highlight </table> (ending tag) also.
• Language Help: Allows programmer to help on the currently selected tag, attributes or whatever it is. Just press F1 after select something, and it will open help options.
• PHP Debugger: test and debug the code line by line and halt on the specified condition. Programmer can check every variable on every line by using this feature.
• Inspector: Basically used to help programmers to write better mark-up. This IDE provides HTML/CSS inspector, which will help you to optimize your website for peak performance and compatibility.
• SQL Manager: Operate with all types of database actions like add/modify/remove, import/export data and can execute your queries also.
• FTP Support: Developer can directly work with remote server and do changes with files stored on the server. FTP support is newly added feature and make this software more usable.

So the list have covered-up some great advantages of the editor. Other upgraded features of this software includes code collapsing, tooltips (with images), loaded image previews, book-marks and more can be read on Codelobster Editor Features.

Plugins

Besides this and ultimate PHP editor, Codelobster software also have standard and effective plugins through which you can easily customize your website. Here’s a list of software, our plugins can work with:

•          WordPress engine
•          Drupal and Joomla CMS
•          Frameworks like CakePHP, CodeIgniter, Syfony and YII
•          JQuery
•          Smarty template engine

Overview

Tag	Codelobster Software
URL Download Link	http://www.codelobster.com Download PHP Editor
Languages	English, French, Russian, German, Spanish and Portuguese
Operating Systems	Win 7, Win Vista, Win XP and Win 2000
Available Software	PHP Editor, Plugins and more

How to use HyperlinkButton with XAML in Windows 8 App Development

HyperLinkButton, used to open the specified URI in the default browser. URI can be specified in NavigateURI property of this button and it will launch that by clicking on that button. This button look like a text with underline. This button opens another page side by side in windows 8 app development.

Here's the XAML code which will create this type of button:

<Page

    x:Class="App4.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App4"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        

<HyperlinkButton x:Name="h1" NavigateUri="http://msdn.microsoft.com" Height="200" Width="257" Content="Microsoft Development Network" Margin="90,20,0,548" />

    </Grid>

</Page>

Here above the XAML code is so simple to read and understand. This code is using some mostly used properties described below:

• x:Name: Specify the name of this button and used in code behind file.
• NavigateURI: get or set the URI to navigate to when the button is clicked.
• Height & Width: commonly used property by XAML elements. Read Height & Width in XAML.
• Content: the text to be shown on the button.
• Margin: specify the extra space to get placed around the outside edges. Read Margin in XAML.

Output

Use HyperlinkButton in C# code

How to make custom login control in asp.net programming

Introduction about security of your web page in asp.net programming

You have been familiarized with the process of creating websites of your choice. However , only creating a website is not enough, one have to secure from unauthorized users. Such users can access and steal vital information of other users or about secret info of website such as credit card numbers and email-ids.
Considering these factors, it is necessary to secure the websites from malicious users. To implement security, we must be able to track the user who visit the website and allow only authorized users to access the website resources. For tracking users, we need to collect some required information (such as name, email id, and contact no.) including username and password.

Users are required to furnish username and password to authenticate them as valid/registered users.To fulfill these tasks, we need to create a user interface for authenticating the user, and displaying the desired page based on the roles or rights given to the user. However, creating such forms or user interface with the help of standard ASP.NET Programming server controls is quite tedious and time consuming.

There is a fix login control in Visual Studio 2013 ASP programming, but it is attached with the in-built database. That's why we are designing custom login control for security of the web page, because through custom login control, programmer can check credentials from its own database.

 Follow some steps to make custom login control in asp.net programming

Step-1 : Design view of the asp program. We are designing something like the image shown.

Step-2: ASPX Code part in asp.net programming

<p>
        <h2>Login for security</h2></p>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" BackColor="#CCCC00" BorderColor="Black" BorderStyle="Solid" BorderWidth="4px" />
    <p>
        Enter member username :&nbsp;
        <asp:TextBox ID="usrtxt" runat="server" Width="182px"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="usrtxt" ErrorMessage="Enter Username" ForeColor="Maroon">*</asp:RequiredFieldValidator>
    </p>
    <p>
        Enter&nbsp; member password : <asp:TextBox ID="pwd" runat="server" TextMode="Password" Width="182px"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="usrtxt" ErrorMessage="Enter password" ForeColor="Maroon">*</asp:RequiredFieldValidator>
    </p>
    <p>
        <asp:Button ID="Button1" runat="server" Text="Member Login" OnClick="Button1_Click" />
    </p>
    <p>
        <asp:Label ID="Label1" runat="server"></asp:Label>

C# Code part

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class welcome : System.Web.UI.Page
{
    SqlDataReader rd;
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        bool flag=true ;
        using (SqlConnection con = new SqlConnection())
        {

        con.ConnectionString =ConfigurationManager .ConnectionStrings ["ConnectionString"].ToString ();
        con.Open ();
            using (SqlCommand cmd=new SqlCommand ())
            {
                cmd.CommandText ="select * from [Table]";
                cmd.Connection =con;
                rd=cmd.ExecuteReader (CommandBehavior .CloseConnection);
                while (rd.Read ())
{
                    if (rd["username"].ToString ().Equals(usrtxt .Text) && rd["password"].ToString ().Equals (pwd .Text))
                    {
                        flag =false ;
                        Session ["username"]=rd["username"].ToString ();
                        break ;

                    }
     
}
                if (flag ==true)
                    Label1 .Text ="No record found";
                else
                    Response .Redirect ("~/admin/securepage.aspx");

             
            }
        }
    }
}

Run this web page and the same design will be shown to you and you will be able to check the given credentials in your own database. The database name will be pass through the connection string used in the C# code.