شرح برمجة خاصية تحميل المزيد - Load More



بسم الله الرحمن الرحيم

والصلاة والسلام على خير خلق الله .. سيدنا وحبيبنا والشافع فينا محمد وعلى اله وصحابته اجمعين ومن تبعهم باحسان الى يوم الدين امين .. وبعد:



اليوم ان شاء الله مع موضوع جديد .. موضوع غير منتشر بكثرة والكثير يبحث عنه ..

انه طريقة برمجة خاصية تحميل المزيد او بالانجليزية Load More



على بركة الله .. اولا لننشئ 4 صفحات كالتالي :

1 - index.php
2 - class_con.php
3 - ajax.js
4 - stlye.css
وتحميل مكتبة البوتستراب من هنا :

ثم مكتبة الجيكويري من هنا :

امر انشاء قاعدة البيانات والجداول (يمكنك نسخ الاكواد وعمل ملف جديد باسم world.sql ولصق الاكواد فيه):
كود php
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
-- phpMyAdmin SQL Dump
-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Mar 12, 2015 at 04:42 PM
-- Server version: 5.6.17
-- PHP Version: 5.5.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `world`
--
-- --------------------------------------------------------
--
-- Table structure for table `city`
--
CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Name` char(35) NOT NULL DEFAULT '',
  `CountryCode` char(3) NOT NULL DEFAULT '',
  `District` char(20) NOT NULL DEFAULT '',
  `Population` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4080 ;
--
-- Dumping data for table `city`
--
INSERT INTO `city` (`id`, `Name`, `CountryCode`, `District`, `Population`) VALUES
(1, 'Kabul', 'AFG', 'Kabol', 1780000),
(2, 'Qandahar', 'AFG', 'Qandahar', 237500),
(3, 'Herat', 'AFG', 'Herat', 186800),
(4, 'Mazar-e-Sharif', 'AFG', 'Balkh', 127800),
(5, 'Amsterdam', 'NLD', 'Noord-Holland', 731200),
(6, 'Rotterdam', 'NLD', 'Zuid-Holland', 593321),
(7, 'Haag', 'NLD', 'Zuid-Holland', 440900),
(8, 'Utrecht', 'NLD', 'Utrecht', 234323),
(9, 'Eindhoven', 'NLD', 'Noord-Brabant', 201843),
(10, 'Tilburg', 'NLD', 'Noord-Brabant', 193238),
(11, 'Groningen', 'NLD', 'Groningen', 172701),
(12, 'Breda', 'NLD', 'Noord-Brabant', 160398),
(13, 'Apeldoorn', 'NLD', 'Gelderland', 153491),
(14, 'Nijmegen', 'NLD', 'Gelderland', 152463),
(15, 'Enschede', 'NLD', 'Overijssel', 149544),
(16, 'Haarlem', 'NLD', 'Noord-Holland', 148772),
(17, 'Almere', 'NLD', 'Flevoland', 142465),
(18, 'Arnhem', 'NLD', 'Gelderland', 138020),
(19, 'Zaanstad', 'NLD', 'Noord-Holland', 135621),
(20, '´s-Hertogenbosch', 'NLD', 'Noord-Brabant', 129170),
(21, 'Amersfoort', 'NLD', 'Utrecht', 126270),
(22, 'Maastricht', 'NLD', 'Limburg', 122087),
(23, 'Dordrecht', 'NLD', 'Zuid-Holland', 119811),
(24, 'Leiden', 'NLD', 'Zuid-Holland', 117196),
(25, 'Haarlemmermeer', 'NLD', 'Noord-Holland', 110722),
(26, 'Zoetermeer', 'NLD', 'Zuid-Holland', 110214),
(27, 'Emmen', 'NLD', 'Drenthe', 105853),
(28, 'Zwolle', 'NLD', 'Overijssel', 105819),
(29, 'Ede', 'NLD', 'Gelderland', 101574),
(30, 'Delft', 'NLD', 'Zuid-Holland', 95268),
(31, 'Heerlen', 'NLD', 'Limburg', 95052),
(32, 'Alkmaar', 'NLD', 'Noord-Holland', 92713),
(33, 'Willemstad', 'ANT', 'Curaçao', 2345),
(34, 'Tirana', 'ALB', 'Tirana', 270000),
(35, 'Alger', 'DZA', 'Alger', 2168000),
(36, 'Oran', 'DZA', 'Oran', 609823),
(37, 'Constantine', 'DZA', 'Constantine', 443727),
(38, 'Annaba', 'DZA', 'Annaba', 222518),
(39, 'Batna', 'DZA', 'Batna', 183377),
(40, 'Sétif', 'DZA', 'Sétif', 179055),
(41, 'Sidi Bel Abbès', 'DZA', 'Sidi Bel Abbès', 153106),
(42, 'Skikda', 'DZA', 'Skikda', 128747),
(43, 'Biskra', 'DZA', 'Biskra', 128281),
(44, 'Blida (el-Boulaida)', 'DZA', 'Blida', 127284),
(45, 'Béjaïa', 'DZA', 'Béjaïa', 117162),
(46, 'Mostaganem', 'DZA', 'Mostaganem', 115212),
(47, 'Tébessa', 'DZA', 'Tébessa', 112007),
(48, 'Tlemcen (Tilimsen)', 'DZA', 'Tlemcen', 110242),
(49, 'Béchar', 'DZA', 'Béchar', 107311),
(50, 'Tiaret', 'DZA', 'Tiaret', 100118),
(51, 'Ech-Chleff (el-Asnam)', 'DZA', 'Chlef', 96794),
(52, 'Ghardaïa', 'DZA', 'Ghardaïa', 89415),
(53, 'Tafuna', 'ASM', 'Tutuila', 5200),
(54, 'Fagatogo', 'ASM', 'Tutuila', 2323),
(55, 'Andorra la Vella', 'AND', 'Andorra la Vella', 21189),
(56, 'Luanda', 'AGO', 'Luanda', 2022000),
(57, 'Huambo', 'AGO', 'Huambo', 163100),
(58, 'Lobito', 'AGO', 'Benguela', 130000),
(59, 'Benguela', 'AGO', 'Benguela', 128300),
(60, 'Namibe', 'AGO', 'Namibe', 118200),
(61, 'South Hill', 'AIA', '?', 961),
(62, 'The Valley', 'AIA', '?', 595),
(63, 'Saint John´s', 'ATG', 'St John', 24000),
(64, 'Dubai', 'ARE', 'Dubai', 669181),
(65, 'Abu Dhabi', 'ARE', 'Abu Dhabi', 398695),
(66, 'Sharja', 'ARE', 'Sharja', 320095),
(67, 'al-Ayn', 'ARE', 'Abu Dhabi', 225970),
(68, 'Ajman', 'ARE', 'Ajman', 114395),
(69, 'Buenos Aires', 'ARG', 'Distrito Federal', 2982146),
(70, 'La Matanza', 'ARG', 'Buenos Aires', 1266461),
(71, 'Córdoba', 'ARG', 'Córdoba', 1157507),
(72, 'Rosario', 'ARG', 'Santa Fé', 907718),
(73, 'Lomas de Zamora', 'ARG', 'Buenos Aires', 622013),
(74, 'Quilmes', 'ARG', 'Buenos Aires', 559249),
(75, 'Almirante Brown', 'ARG', 'Buenos Aires', 538918),
(76, 'La Plata', 'ARG', 'Buenos Aires', 521936),
(77, 'Mar del Plata', 'ARG', 'Buenos Aires', 512880),
(78, 'San Miguel de Tucumán', 'ARG', 'Tucumán', 470809),
(79, 'Lanús', 'ARG', 'Buenos Aires', 469735),
(80, 'Merlo', 'ARG', 'Buenos Aires', 463846),
(81, 'General San Martín', 'ARG', 'Buenos Aires', 422542),
(82, 'Salta', 'ARG', 'Salta', 367550),
(83, 'Moreno', 'ARG', 'Buenos Aires', 356993),
(84, 'Santa Fé', 'ARG', 'Santa Fé', 353063),
(85, 'Avellaneda', 'ARG', 'Buenos Aires', 353046),
(86, 'Tres de Febrero', 'ARG', 'Buenos Aires', 352311),
(87, 'Morón', 'ARG', 'Buenos Aires', 349246),
(88, 'Florencio Varela', 'ARG', 'Buenos Aires', 315432),
(89, 'San Isidro', 'ARG', 'Buenos Aires', 306341),
(90, 'Tigre', 'ARG', 'Buenos Aires', 296226),
(91, 'Malvinas Argentinas', 'ARG', 'Buenos Aires', 290335),
(92, 'Vicente López', 'ARG', 'Buenos Aires', 288341),
(93, 'Berazategui', 'ARG', 'Buenos Aires', 276916),
(94, 'Corrientes', 'ARG', 'Corrientes', 258103),
(95, 'San Miguel', 'ARG', 'Buenos Aires', 248700),
(96, 'Bahía Blanca', 'ARG', 'Buenos Aires', 239810),
(97, 'Esteban Echeverría', 'ARG', 'Buenos Aires', 235760),
(98, 'Resistencia', 'ARG', 'Chaco', 229212),
(99, 'José C. Paz', 'ARG', 'Buenos Aires', 221754),
(100, 'Paraná', 'ARG', 'Entre Rios', 207041),
(101, 'Godoy Cruz', 'ARG', 'Mendoza', 206998),
(102, 'Posadas', 'ARG', 'Misiones', 201273),
(103, 'Guaymallén', 'ARG', 'Mendoza', 200595),
(104, 'Santiago del Estero', 'ARG', 'Santiago del Estero', 189947),
(105, 'San Salvador de Jujuy', 'ARG', 'Jujuy', 178748),
(106, 'Hurlingham', 'ARG', 'Buenos Aires', 170028),
(107, 'Neuquén', 'ARG', 'Neuquén', 167296),
(108, 'Ituzaingó', 'ARG', 'Buenos Aires', 158197),
(109, 'San Fernando', 'ARG', 'Buenos Aires', 153036),
(110, 'Formosa', 'ARG', 'Formosa', 147636),
(111, 'Las Heras', 'ARG', 'Mendoza', 145823),
(112, 'La Rioja', 'ARG', 'La Rioja', 138117),
(113, 'San Fernando del Valle de Cata', 'ARG', 'Catamarca', 134935),
(114, 'Río Cuarto', 'ARG', 'Córdoba', 134355),
(115, 'Comodoro Rivadavia', 'ARG', 'Chubut', 124104);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;




نضع في صفحة index.php الكود التالي :
كود php
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
<!doctype html>
<html lang="ar">
<head>
    <**************** charset="UTF-8">
    <title>Load More</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="<acronym title="JavaScript">js</acronym>/jquery.<acronym title="JavaScript">js</acronym>"></script>
    <script src="<acronym title="JavaScript">js</acronym>/ajax.<acronym title="JavaScript">js</acronym>"></script>
</head>
<body>
    <?php
       require_once "class_con.php";
    ?>
    <div class="container">
       <div class="well">
          <h2>jQuery Load More</h2>
          <p>This is demostrative tutorial for jQuery load more functionality</p>
       </div>
       <div>
          <?php echo $data; ?>
       </div>
       <center><button class="btn btn-primary loadmore">Load More</button></center>
       <div class="well no-loadmore">No feeds</div>
    </div>
</body>
</html>




ثم في صفحة class_con.php نضع الكود التالي :
كود php
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
<?php
class feeds {
    public function connect($from, $to){
       $connect = new mysqli('localhost', 'root', 'password', 'world');
       //check connect to db
       if($connect->connect_error){
          die("Not connect to database");
       }
       $query = $connect->query("select * from city where id>'$from' and id<'$to'");
       $result = mysqli_num_rows($query);
       $data = '';
       if($result>0){
          while($row = $query->fetch_object()){
             $id = $row->id;
             $name = $row->Name;
             $data = $data.'<blockquote><p>'.$name.'</p></blockquote>';
          }
          $data = $data.'<div class="final" val="'.$id.'"></div>';
          return $data;
       }else{
          echo '0';
       }
    }
    public function main(){
       if(isset($_POST['from'])){
          $from = $_POST['from'];
          $to = $from+11;
          $data = $this->connect($from,$to);
          echo $data;
       }else{
          $data = $this->connect(0,11);
          return $data;
       }
    }
}
$obj = new feeds();
$data = $obj->main();
?>




ثم في صفحة ajax.js نضع الكود التالي :
كود Java Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
    $('.loadmore').click(function(){
       var val = $('.final').attr('val');
       $.post('class_feeds.php',{'from':val},function(data){
          if (!isFinite(data)) {
             $('.final').remove();
             $(data).insertBefore('.loadmore');
          }else{
             $('.loadmore').hide();
             $('.no-loadmore').show();
          }
       });
    });
})




واخيرا ... في صفحة style.css نضع الاستايل التالي :
كود HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
    background: #dde;
}
.container{
    margin: 20px auto;
    padding: 10px;
    width: 500px;
    background: white;
}
.no-loadmore{
    display: none;
    text-align: center;
    font: 13px consol;
    font-weight: bold;
}




او يمكنكم تحميل ملفات المشروع كاملة من هنا :
http://up.dev-point.com/download168755.html
الاكواد جد بسيطة ومن لم يفهم ما عليه الا مراسلتي او وضع تعليق حتى احول الشرح الى فيديو

الى هنا تقبلوا احترامي وتقديري

بقلم محمد طه

محمد طه مدون مغربي مهتم ببرمجة وتصميم المواقع ومهووس بتعلم كل جديد في مجال البرمجة والتصميم واحب نشر ما اعرفه ليتعلم منه الناس باسلوبي الخاص
التسميات: , ,
مرسلة بواسطة في




اضغط على السمايل للحصول على الكود: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

اضف كود (html) ركن الاسئلة !
الاشتراك في: تعليقات الرسالة (Atom)
TOP