Jquery | MinhD.net

A Very Simple Delete Confirmation dialog

Dec 6th

With Jquery of course

Ok, we often have to do delete button and have to do something about if the users click the button, an the delete action should not taken right away… What if the user doesn’t want to click the button but click it anyway (they are users, their actions are illogical but we still have to meddle around the problem). Around the usability stuff, a confirmation dialog is the mostly used, and if you are scared of this concept, you shouldn’t, because it’s so widely used.

This method is unobtrusive, meaning that even without javascript enabled, the delete button will still works, but no confirmation dialog.

First, we will have a link that will link to our delete function, whatever that’ll be

1	<a href="/delete/this/thing" class="delete">Delete</a>

I give it a class so that all delete button with the same class can have the same functionality determined by my JavaScript or just basically the same styling.
And we can go with this:

1
2
3
4
5
6
7
8
9
10
11
12
13

Very simple. And it will work. Also, you can also try

1	return confirm(”Delete this item?”);

for an easier one-liner.

Better approach and looks nicer would include using a popup box, make use of tooltips, dialog boxes from Jquery UI… there’s an universe to discover

Jquery

To be a web developer

Oct 17th

Posted by dekarvn in Experience

12 comments

Is to know all of these <insert evil and sinister laugh here> languages. This post serves as a starting place for all who wants to be a web developer. You might not need to understand in depth on any of these, but the least is the basic. My choices of framework serves as a suggestion only, the real choice is yours.

1. HTML

Back to when internet was born and introduced to the naked world… Back to when the internet was young and needing a serious developer….Tim Berners-Lee said “let there be HTML”… and there was HTML, and it was good. The proof of its goodness stays ever since then until today. Yeah, every serious web developer use HTML. Easy to learn, easy to misuse. With great powers come great responsibility. So code well, and follow the standards.

W3C HTML tutorial

2. CSS

HTML always comes with CSS. It helps you refrain from misusing those font and colors tag by having a separate CSS file. This serve as a way for you to separate content and display components. Also, helps you to hate tables and loves divs and spans. Though many would say otherwise…

W3C CSS Tutorial

3. Server Side scripting

When you have master your way of representing your thoughts on pretty html/css compliant documents, it’s time to deliver dynamic content. One problem though, is to choose which server side scripting you would go for. Unlike HTML/CSS where only 1 thing is required to learn and to have it beaten to your head. There are choices.

My Choice: PHP. Other choices: Ruby, Python, Java, ASP.NET

4. SQL

One choice again. SQL have become a parent of all database language. There are many database engine, most of them are built ontop of SQL or understand SQL anyway. So why bother learning a language that you might not be using. SQL is the way to go.

W3C SQL tutorial

5. Javascript / Client Side Scripting

User interactivity is the heart of the website, make sure people enjoys reading your website. Javacsript has matured into a great way of delivering dynamic content by using AJAX interactivity. Facebook does it, most new website nowadays does it. Why don’t you?

W3C Javasccript Tutorial

6. Frameworks

Web developers have been reinventing the wheel so many times that they come up with a whole sort of different type of wheels. These framework give you the wheel and tell you how to use it properly with examples and screencasts… Save you tons and tons of time trying to imagine how the wheel would look like and how it will work.

There is no one type of wheel that helps all web applications. So there are a lot. Choose wisely for a server side scripting framework and a javascript framework.

my choices: PHP Framework: Codeigniter, CSS Framework: 960.gs, Javascript framework: Jquery or Mootools

7. Knowing your web server.

Tricks and tricks. Understand how to give your website optimum experience by deliver the webpage to them as fast as it could be. When you have become a master and reach new ceiling, it’s time to differentiate yourself.

codeigniter, Jquery, review, tutorial

Handpicked Handy PHP Libraries

Oct 15th

Posted by dekarvn in PHP/MySQL

9 comments

Do you ever wondering how to do certain things in PHP like generating graphs, generating pdf or parse RSS efficiently and easily. I found myself rewriting these codes every once in a while and was lucky enough to find these wonderful libraries/framework that are completely free and easy to use.

There are more, but I will only listed my handpicked best one out of these categories

RSS Parser

Normally I would use Jquery to do this stuff, but meh. When it comes to PHP, it’s all the way PHP

SimplePie: Very fast, easy to use, PHP driven RSS Parser

Demo | Documentation | Screencast (Yay!!)

I once used MagpieRSS for performance, but SimplePie offers a greater deal of functionality and when web servers are getting stronger days by days, the performance difference is not that big. One thing I love about this SimplePie is that it is actively being developed and actively updated.

Also, SimplePie got an integration with Codeigniter, my favourite PHP framework

Graph Generator

pChart: an Object Oriented framework that is capable of generating charts, graphs and best of all, it’s free. Data is grabbed from SQL Queries or CSV Files or just manually put them in.

Screenshots | Demo | Documentation (Very detailed!)

However, this library requires GD Library to be installed onto your web server and have PHP compiled with it. If you don’t have GD installed, better check for my second alternative: Libchart, a little bit old but suffice.

PDF Generator

FPDF: This little baby works splendid. It can stand alone or with zlib for compression and GD for GIF support.

Tutorial | Documentation

It can be easily integrated with Codeigniter

Excel Generator

php-excel: very easy and fast way to generate excel spreadsheet using PHP on the fly

The approach is to convert a 2 dimensional array in PHP to a spreadsheet in Excel. However, because of it’s easy to use and fast performance, it does not have quite a few of features like cell styling, functions creating, sort…. If you need those (I don’t!), your choice is PHPExcel

Payment System

PHP-OpenID: for paypal, authorize.net and 2checkout (2CO). Yeah, the 3 most popular ones, who needs the lesser unpopular ones?

Checkout the links, it’s very detailed with code examples and all other stuff that you need to know. Scrap those you don’t need to know

This guy, Emran, is my hero by delivering this wonderful library to us

codeigniter, Jquery, review, snippets

Jquery Pagination System

Oct 13th

Posted by dekarvn in Jquery

3 comments

When you think of a pagination system, you would think about some messy PHP codes to generate each and every page. So subsequently, for an user who wants to browse through your pages, they will do a lot of calls to your PHP file and by that do a lot of calls to your database (a bad thing!). So, we want to load all the data from PHP/MySQL ONCE and have the pagination taken care of by Jquery.

Copy & Paste all of this code into a html file. Make sure you are online so that the browser can retrieve the jquery library off google

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Pagination Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2");google.setOnLoadCallback(function(){});</script>

<script type="text/javascript">
$(document).ready(function(){

var show_per_page = 7;
var number_of_items = $('#content').children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);
var end = number_of_pages -1;

$('#current_page').val(0);
$('#show_per_page').val(show_per_page);

var navigation_html = '<a href="javascript:go_to_page(0);">Begin</a>';
navigation_html += '<a href="javascript:nav(-1);">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a href="javascript:nav(+1);">Next</a>';
navigation_html += '<a href="javascript:go_to_page(' + end +')"">End</a>';

$('#page_navigation').html(navigation_html);
$('#page_navigation .page_link:first').addClass('active_page');

$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function nav(dir){
if(dir==+1){
new_page = parseInt($('#current_page').val()) + 1;
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}else if(dir==-1){
new_page = parseInt($('#current_page').val()) - 1;
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
}

function go_to_page(page_num){
var show_per_page = parseInt($('#show_per_page').val());
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
$('#current_page').val(page_num);
}

</script>

<style>
#page_navigation a{
padding:3px;
border:1px solid #dedede;
margin:3px;
color:black;
text-decoration:none;
}
#page_navigation a:hover{
background: #FFC;
}
.active_page{
background:#036;
color:white !important;
}
ul#content li{
padding: 5px;
}
</style>

</head>

<body>
<ul id='content'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li>
<li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li>
<li>Pellentesque ac sem ac sem tincidunt euismod.</li>
<li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li>
<li>Nullam in nisi sit amet velit placerat laoreet.</li>
<li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li>
<li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li>
<li>In non eros eu lacus vestibulum sodales.</li>
<li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li>
<li>Proin ullamcorper est vitae lorem mollis bibendum.</li>
<li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li>
<li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li>
<li>Maecenas lacinia lectus ac nulla commodo lacinia.</li>
<li>Maecenas quis massa nisl, sed aliquet tortor.</li>
<li>Quisque porttitor tellus ut ligula mattis luctus.</li>
<li>In at mi dolor, at consectetur risus.</li>
<li>Etiam id erat ut lorem fringilla dictum.</li>
<li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li>
<li>Pellentesque quis magna vitae quam malesuada aliquet.</li>
<li>Curabitur tempus tellus quis orci egestas condimentum.</li>
<li>Maecenas laoreet eros ac orci adipiscing pharetra.</li>
<li>Nunc non mauris eu nibh tincidunt iaculis.</li>
<li>Ut semper leo lacinia purus hendrerit facilisis.</li>
<li>Praesent et eros lacinia massa sollicitudin consequat.</li>
<li>Proin non mauris in sem iaculis iaculis vel sed diam.</li>
<li>Nunc quis quam pulvinar nibh volutpat aliquet eget in ante.</li>
<li>In ultricies dui id libero pretium ullamcorper.</li>
<li>Morbi laoreet metus vitae ipsum lobortis ultrices.</li>
<li>Donec venenatis egestas arcu, quis eleifend erat tempus ullamcorper.</li>
<li>Morbi nec leo non enim mollis adipiscing sed et dolor.</li>
<li>Cras non tellus enim, vel mollis diam.</li>
<li>Phasellus luctus quam id ligula commodo eu fringilla est cursus.</li>
<li>Ut luctus augue tortor, in volutpat enim.</li>
<li>Cras bibendum ante sed erat pharetra sodales.</li>
<li>Donec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet.</li>
<li>Vestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum.</li>
<li>Proin vehicula suscipit felis, vitae facilisis nulla bibendum ac.</li>
<li>Cras iaculis neque et orci suscipit id porta risus feugiat.</li>
<li>Suspendisse eget tellus purus, ac pulvinar enim.</li>
<li>Morbi hendrerit ultrices enim, ac rutrum felis commodo in.</li>
<li>Suspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae.</li>
<li>Nulla sed purus et tellus convallis scelerisque.</li>
<li>Nam at justo ut ante consectetur faucibus.</li>
<li>Proin dapibus nisi a quam interdum lobortis.</li>
<li>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</li>
<li>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</li>

</ul>

<div id='page_navigation'></div>
<input type='hidden' id='current_page' /><input type='hidden' id='show_per_page' />
</body>
</html>

Jquery, tutorial