Skip to content

Adnan Ahmad / Assignments

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 37843215 37843215dac685e1808e9552caf236e452afd3c0 by Adnan Ahmad
Options

firts commit

0 parents
Inline Side-by-side
Showing 59 changed files with 1212 additions and 0 deletions
1 <?php
2
3 $databaseHost = 'localhost';
4 $databaseName = 'songs_db';
5 $databaseUsername = 'root';
6 $databasePassword = 'root';
7
8 $mysqli = mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName);
9
10 ?>
...\ No newline at end of file ...\ No newline at end of file
1 <?php
2
3 include_once("config.php");
4
5 if($_POST['action']==="Delete"){
6 $id = $_POST['id'];
7 $query = "DELETE FROM songs WHERE id = $id;";
8 if(mysqli_query($mysqli,$query)){
9 echo "Item DELETE Successfully!";
10
11 }else{
12 echo "Item DELETE Faild!";
13 }
14 }elseif(!empty($_POST['song_id'])){
15 $song = $_POST['song_name'];
16 $singer = $_POST['singer_name'];
17 $ratings = $_POST['ratings'];
18 $id = $_POST['song_id'];
19 if(!empty($_FILES["myimage"]["name"])){
20 $target_file = "songimages/".basename($_FILES["myimage"]["name"]);
21 $status = move_uploaded_file($_FILES["myimage"]["tmp_name"],$target_file);
22 $query = "UPDATE songs
23 SET song_name = '$song', artist_name = '$singer', song_img = '$target_file', rating_no = '$ratings'WHERE id = $id;";
24 }else{
25 $query = "UPDATE songs
26 SET song_name = '$song', artist_name = '$singer', rating_no = '$ratings'WHERE id = $id;";
27 }
28 if(mysqli_query($mysqli,$query)){
29 echo "Item UPDATE Successfully!";
30
31 }else{
32 echo "Item UPDATE Faild!";
33 }
34
35 }else{
36 if(!empty($_FILES["myimage"]["name"])){
37 $song = $_POST['song_name'];
38 $singer = $_POST['singer_name'];
39 $ratings = $_POST['ratings'];
40 $target_file = "songimages/".basename($_FILES["myimage"]["name"]);
41 $status = move_uploaded_file($_FILES["myimage"]["tmp_name"],$target_file);
42
43 $query = "INSERT INTO songs (song_name,artist_name,song_img,rating_no) VALUES ('$song','$singer','$target_file','$ratings')";
44
45 if(mysqli_query($mysqli,$query) && $status){
46 echo "Item Inserted Successfully!";
47
48 }else{
49 echo "Item Inserted Faild!";
50 }
51 }else{
52 echo "Item Inserted Faild!";
53 }
54 }
55
56
57
58
59
60
61
62 ?>
1 <?php
2
3 include_once("config.php");
4 $item = array();
5 if(isset($_POST['id'])){
6 $query = mysqli_query($mysqli,"select * from songs where id = '".$_POST['id']."'");
7 $i = 0;
8 while($row = mysqli_fetch_assoc($query)){
9 $item['id'] = $row['id'];
10 $item['song'] = $row['song_name'];
11 $item['singer'] = $row['artist_name'];
12 $item['image'] = $row['song_img'];
13 $item['positive_rating'] = $row['rating_no'];
14 }
15 }else
16 {
17 $query = mysqli_query($mysqli,"select * from songs");
18 $i = 0;
19 while($row = mysqli_fetch_assoc($query)){
20 $item[$i]['id'] = $row['id'];
21 $item[$i]['song'] = $row['song_name'];
22 $item[$i]['singer'] = $row['artist_name'];
23 $item[$i]['image'] = $row['song_img'];
24 $item[$i]['positive_rating'] = $row['rating_no'];
25 $i++;
26 }
27
28 }
29
30 echo(json_encode($item));
31
32
33
34 ?>
...\ No newline at end of file ...\ No newline at end of file

38.5 KB

25.5 KB

30.1 KB

17.3 KB
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Assignment No.1</title>
5 </head>
6 <body>
7 adnan
8 <div class="header">
9 <div class="left">
10 <img src="images/dubl-arow-left.png" alt="dubl-arow-left">
11 <img src="images/black-arow.png" alt="black-arow">
12 <img src="images/dubl-arow-right.png" alt="dubl-arow-right">
13
14 </div>
15 <div class="center">
16 <img src="images/apple.png" alt="apple">
17 <img src="images/list.png" alt="list">
18
19
20 </div>
21 <div class="right">
22 <img src="images/user.png" alt="user">adnan
23 <img src="images/down-arow.png" alt="down-arow">
24 <input type="text" name="search_files" placeholder="search files">
25 </div>
26
27
28 </div>
29 </body>
30 </html>
...\ No newline at end of file ...\ No newline at end of file

1011 Bytes

1000 Bytes

982 Bytes
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <link rel="stylesheet" href="style.css">
6
7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
8 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
9
10 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
12 <!--<script src="script/script.js"></script>-->
13
14 <script src="script/jquery.js"></script>
15
16
17
18 <title>Assignment No.1</title>
19 </head>
20 <body>
21
22 <div class="header">
23 <div class="left">
24 <a href="#"><img src="images/dubl-arow-left.png" alt="dubl-arow-left" ></a>
25 <a href="#"><img src="images/black-arow.png" alt="black-arow" ></a>
26 <a href="#"><img src="images/dubl-arow-right.png" alt="dubl-arow-right" ></a>
27 <input type="range" min="1" max="100" value="20" class="slider">
28 </div>
29 <div class="center">
30 <img src="images/apple.png" alt="apple" style="padding: 10px;">
31 <a href="#"><img src="images/list.png" alt="list" style="float: right; padding: 5px;"></a>
32
33
34 </div>
35 <div class="right">
36 <img src="images/user.png" alt="user"><p>adnan</p>
37 <a href="#"><img src="images/down-arow.png" alt="down-arow"></a>
38 <input type="text" name="search_files" id="SearchByArtistName" onsearch="myFunction()" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Search Library">
39 <a href="#"><img src="images/dubl-arow.png" alt="dubl-arow" style="float: right; padding: 2px;"></a>
40 </div>
41 </div>
42
43 <div class="clear"></div>
44
45 <div class="second-header">
46 <div class="left">
47 <a href="#"><img src="images/music.png" alt="music" ></a>
48 <a href="#"><img src="images/vedio.png" alt="vedio" ></a>
49 <a href="#"><img src="images/screen.png" alt="screen" ></a>
50 <a href="#"><img src="images/dotes.png" alt="dotes" ></a>
51 <button type="button" name="add" id="add" class="btn btn-warning" data-toggle="modal" data-target= "#ItemModel">Add new item</button>
52 </div>
53 <div class="center">
54 <p style=" font-family: sans-serif;margin: 5px;">My Music <span>Playlists</span></p>
55 </div>
56 <div class="right">
57 <p id="sortAlbums">Sort by: </p>
58 <ul>
59 <li><a href="#" id="ArtistClick" >Artist</a></li>
60 <li><a href="#" id="RatingClick" >Rating</a></li>
61 </ul>
62 <p>Albums</p>
63 <img src="images/down-arow2.png" alt="down-arow2">
64 </div>
65 </div>
66
67 <div class="clear"></div>
68
69 <div class="main-div">
70 <div class="left-div">
71 <p class="show-text">Library</p>
72 <div class="heading" style="background-color: #DBDBDB;padding: 5px;">
73 <img src="images/music2.png" alt="music2" style="padding: 0 5px;vertical-align: middle;"><b>Music</b></div>
74 <div class="items">
75 <p class="show-text" style="padding-top: 20px;">Playlists</p>
76 <ul>
77 <li><img src="images/geni.png" alt="geni">Genuis </li>
78 <li><img src="images/setting.png" alt="setting"><a href="#">90's Music</a></li>
79 <li><img src="images/setting.png" alt="setting"><a href="#">Classical Music</a></li>
80 <li><img src="images/setting.png" alt="setting"><a href="#">Music Videos</a></li>
81 <li><img src="images/setting.png" alt="setting"><a href="#">My Top Rated</a></li>
82 <li><img src="images/setting.png" alt="setting"><a href="#">Recently Added</a></li>
83 <li><img src="images/setting.png" alt="setting"><a href="#">Recently Played</a></li>
84 <li><img src="images/setting.png" alt="setting"><a href="#">Top 25 Most Played</a></li>
85
86 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
87 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
88 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
89 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
90 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
91 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
92 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
93 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
94 <li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
95 <li><img src="images/itune.png" alt="itune"><a href="#">Playlist</a></li>
96 </ul>
97
98 <div class="buttom">
99 <img src="images/pkus.png" alt="pkus"><img src="images/setting2.png" alt="setting2">
100 </div>
101
102 </div>
103 </div>
104
105 <div class="right-div" id="mainRightDiv" >
106 <!--
107 <div class="item">
108
109 <div class="dropdown">
110 <img src="images/1.png" alt="1st image">
111 <div class="dropdown-content">
112 <a href="item.php">Insert New Item</a>
113 <a href="#">Update</a>
114 <a href="#">Delete</a>
115 </div>
116 </div>
117
118 <p class="song">Jayanta Bhai ki Luv Saaa</p>
119 <p class="singer">Atif Aslam</p>
120 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
121 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
122 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
123 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
124 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
125 </div>
126
127
128
129
130 <div class="item">
131 <img src="images/2.png" alt="2nd image">
132 <p class="song">Twelve Ft Amrinder Gaaaa</p>
133 <p class="singer">Bilal Saeed (DjPunjab.Caaaaa</p>
134 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
135 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
136 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
137 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
138 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
139 </div>
140
141 <div class="item">
142 <img src="images/3.png" alt="3rd image">
143 <p class="song">The Lion of Punjab</p>
144 <p class="singer">Dilijit</p>
145 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
146 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
147 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
148 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
149 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
150 </div>
151
152 <div class="item">
153 <img src="images/4.png" alt="4th image">
154 <p class="song">Khiladi 786</p>
155 <p class="singer">Himesh Remshammiya</p>
156 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
157 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
158 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
159 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
160 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
161 </div>
162
163 <div class="item">
164 <img src="images/5.png" alt="5th image">
165 <p class="song">PTI Songs-PTITigersaaaa</p>
166 <p class="singer">PTITigers.com</p>
167 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
168 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
169 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
170 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
171 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
172 </div>
173
174 <div class="item">
175 <img src="images/2.png" alt="2nd image">
176 <p class="song">Stars Dance [TEH-SOaaaaa</p>
177 <p class="singer">Selena Gomez</p>
178 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
179 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
180 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
181 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
182 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
183 </div>
184
185 <div class="item">
186 <img src="images/6.png" alt="6th image">
187 <p class="song">Bewafaa (2005)</p>
188 <p class="singer">Udit Narayan</p>
189 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
190 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
191 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
192 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
193 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
194 </div>
195
196 <div class="item">
197 <img src="images/7.png" alt="7th image">
198 <p class="song">One Pound Fish (Remaaaa</p>
199 <p class="singer">%C2%A3 1 Fish Man</p>
200 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
201 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
202 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
203 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
204 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
205 </div>
206
207 <div class="item">
208 <img src="images/2.png" alt="2nd image">
209 <p class="song">Unknown Album</p>
210 <p class="singer">Unknown Artist</p>
211 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
212 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
213 <a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
214 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
215 <a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
216 </div>
217 -->
218 </div>
219 <div class="clear"></div>
220 </div>
221
222 <div id="ItemModel" class="modal fade" role = "dialog">
223 <div class="modal-dialog">
224 <div class="modal-content">
225 <div class="modal-header">
226
227 <h4 class="modal-title"> Item </h4>
228 </div>
229 <div class="modal-body">
230 <form id="item_form" action="insert.php" enctype="multipart/form-data" method="post">
231 <p>Song Name</p>
232 <input type="hidden" id = "song_id_item" name="song_id" class="form-control">
233 <input type="text" id = "song_name_item" name="song_name" class="form-control" required >
234 <p>Singer Name</p>
235 <input type="text" id = "singer_name_item" name="singer_name" class="form-control" required>
236 <p>Image</p>
237 <input type="file" name="myimage" id = "song_image_item">
238
239 <select class="form-control" id = "ratings" name="ratings" required>
240 <option>1</option>
241 <option>2</option>
242 <option>3</option>
243 <option>4</option>
244 <option>5</option>
245 </select>
246 <input type="submit" id="sub" name="save" class="form-control btn-info">
247
248 </form>
249 </div>
250 <div class="modal-footer">
251 <p id="form-message"></p>
252 <button type="button" class="btn btn-default" data-dismiss = "modal">close</button>
253 </div>
254
255 </div>
256
257 </div>
258
259 </div>
260
261 <div class="footer">
262 <p>9 albums, 40 minutes, 47.4 MB</p>
263 </div>
264
265 </body>
266 </html>
...\ No newline at end of file ...\ No newline at end of file
1 $(document).ready(function(){
2 items = [];
3 /*items = [
4 {
5 image: "images/1.png",
6 song: "Jayanta Bhai ki Luv Saaa",
7 singer: "Atif Aslam",
8 positive_rating:3
9 },
10
11 {
12 image: "images/2.png",
13 song: "Twelve Ft Amrinder Gaaaa",
14 singer: "Bilal Saeed (DjPunjab.Caaaaa",
15 positive_rating:3
16 },
17
18 {
19 image: "images/3.png",
20 song: "The Lion of Punjab",
21 singer: "Dilijit",
22 positive_rating:3
23 },
24
25 {
26 image: "images/4.png",
27 song: "Khiladi 786",
28 singer: "Himesh Remshammiya",
29 positive_rating:3
30 },
31
32 {
33 image: "images/5.png",
34 song: "PTI Songs-PTITigersaaaa",
35 singer: "PTITigers.com",
36 positive_rating:3
37 },
38
39 {
40 image: "images/2.png",
41 song: "Stars Dance [TEH-SOaaaaa",
42 singer: "Selena Gomez",
43 positive_rating:3
44 },
45
46 {
47 image: "images/6.png",
48 song: "Bewafaa (2005)",
49 singer: "Udit Narayan",
50 positive_rating:3
51 },
52
53 {
54 image: "images/7.png",
55 song: "One Pound Fish (Remaaaa",
56 singer: "$1 Fish Man",
57 positive_rating:3
58 },
59
60 {
61 image: "images/2.png",
62 song: "Unknown Album",
63 singer: "Unknown Artist",
64 positive_rating:3
65 }
66
67 ];
68 */
69 ratingImages = {rating:"images/star.png",
70 no_rating:"images/star2.png"};
71
72 // get data from database through ajax
73 $.ajax({
74 type:'GET',
75 url: '/Assignment/get.php',
76 success: function (data){
77 items = JSON.parse(data);
78 //console.log(items);
79 DisplayItems(items);
80 }
81 });
82
83 var DisplayItems = function (items){
84 var item = "";
85 var SubItem = "";
86 var i = 0;
87 var j = 0;
88 for (i = 0; i<items.length; i++){
89 item += "<div class='item'>" + "<div class='dropdown'>" + "<img src=" + items[i].image + " alt='Song image'>" + "<div class='dropdown-content'><a href='#' class = 'UpdateItems' value = '" + items[i].id + "' data-toggle='modal' data-target= '#ItemModel'>" + "Update" + "</a><a href='#' class = 'DeleteItem' value = '" + items[i].id + "'>" + "Delete" + "</a></div></div>" +
90 "<p class='song' id = 'song_name'>" + items[i].song + "</p>"+
91 "<p class='singer'>" + items[i].singer + "</p>";
92
93 for(j = 0; j<items[i].positive_rating; j++ ){
94 SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
95 }
96
97 for(j; j < 5; j++){
98 SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
99 }
100 item += SubItem;
101 SubItem = "";
102 item += "</div>";
103 }
104 $("#mainRightDiv").append(item);
105 }
106
107 //DisplayItems();
108
109 // Sort By Singer Name
110 $("#ArtistClick").click(function(){
111 items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
112 $("#mainRightDiv").empty();
113 DisplayItems(items);
114 });
115
116 // Sort By Ratings
117 $("#RatingClick").click(function(){
118 items.sort(function(a,b) {return b.positive_rating - a.positive_rating;});
119 $("#mainRightDiv").empty();
120 DisplayItems(items);
121 });
122
123 // Search By Singer Name
124 $("#SearchByArtistName").keyup(function(){
125 SearchValue = $(this).val();
126
127 var item = "";
128 var SubItem = "";
129 ArtistNameArray = [];
130 n = 0;
131 items_length = items.length;
132 for(n = 0; n<items_length; n++){
133 if(items[n].singer.toLowerCase().search(SearchValue.toLowerCase())>=0){
134 ArtistNameArray.push(items[n])
135 }
136 }
137
138 if(ArtistNameArray.length===0){
139 tag = "<div> <p> " + "No Result Found" + " </p></div>";
140 $("#mainRightDiv").html(tag);
141 }
142 else{
143 item = "";
144 for(n = 0; n<ArtistNameArray.length; n++){
145
146 item += "<div class='item'>" + "<img src=" + ArtistNameArray[n].image + " alt='Song image'>" +
147 "<p class='song'>" + ArtistNameArray[n].song + "</p>"+
148 "<p class='singer'>" + ArtistNameArray[n].singer + "</p>";
149
150 for(j = 0; j<ArtistNameArray[n].positive_rating; j++ ){
151 SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
152 }
153
154 for(j; j < 5; j++){
155 SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
156 }
157 item += SubItem;
158 SubItem = "";
159 item += "</div>";
160 }
161
162 //console.log(item);
163 $('#mainRightDiv').html(item);
164
165 }
166 });
167
168
169 // data inserted
170 $('#item_form').on('submit', function (e) {
171 console.log('here');
172 e.preventDefault();
173 data = new FormData(document.getElementById('item_form'));
174 $.ajax({
175 type: 'POST',
176 url: '/Assignment/database.php',
177 data: data,
178 cache: false,
179 processData: false,
180 contentType: false,
181 success: function (info) {
182 document.getElementById("item_form").reset();
183 alert(info);
184 }
185 });
186
187 });
188 // update items
189
190 $('body').on('click', '.UpdateItems',function () {
191 id = $(this).attr('value');
192 $.ajax({
193 type:'POST',
194 url: '/Assignment/get.php',
195 data:{'id':id},
196 datatype: 'JSON',
197 success: function (data){
198 item = JSON.parse(data);
199 $('#song_id_item').val(item['id']);
200 $('#song_name_item').val(item['song']);
201 $('#singer_name_item').val(item['singer']);
202 $('#song_image_item').html(item['image']);
203 $('#ratings').val(item['positive_rating']);
204 }
205 });
206
207 });
208
209 // Delete item
210 $('body').on('click', '.DeleteItem',function () {
211 id = $(this).attr('value');
212 action = "Delete";
213 if(confirm('Are you sure you want to delete this?')){
214 $.ajax({
215 type:'POST',
216 url: '/Assignment/database.php',
217 data:{'id':id, 'action':action},
218 success: function (info){
219 alert(info);
220 }
221 });
222 }
223
224
225 });
226
227
228
229 });
1
2 document.addEventListener("DOMContentLoaded", function(event) {
3
4 try{
5 items = [
6 {
7 image: "images/1.png",
8 song: "Jayanta Bhai ki Luv Saaa",
9 singer: "Atif Aslam",
10 positive_rating:3
11 },
12
13 {
14 image: "images/2.png",
15 song: "Twelve Ft Amrinder Gaaaa",
16 singer: "Bilal Saeed (DjPunjab.Caaaaa",
17 positive_rating:3
18 },
19
20 {
21 image: "images/3.png",
22 song: "The Lion of Punjab",
23 singer: "Dilijit",
24 positive_rating:3
25 },
26
27 {
28 image: "images/4.png",
29 song: "Khiladi 786",
30 singer: "Himesh Remshammiya",
31 positive_rating:3
32 },
33
34 {
35 image: "images/5.png",
36 song: "PTI Songs-PTITigersaaaa",
37 singer: "PTITigers.com",
38 positive_rating:3
39 },
40
41 {
42 image: "images/2.png",
43 song: "Stars Dance [TEH-SOaaaaa",
44 singer: "Selena Gomez",
45 positive_rating:3
46 },
47
48 {
49 image: "images/6.png",
50 song: "Bewafaa (2005)",
51 singer: "Udit Narayan",
52 positive_rating:3
53 },
54
55 {
56 image: "images/7.png",
57 song: "One Pound Fish (Remaaaa",
58 singer: "$1 Fish Man",
59 positive_rating:3
60 },
61
62 {
63 image: "images/2.png",
64 song: "Unknown Album",
65 singer: "Unknown Artist",
66 positive_rating:3
67 }
68
69 ];
70
71 ratingImages = {rating:"images/star.png",
72 no_rating:"images/star2.png"};
73
74 //var items_div = document.getElementsByClassName("main_right_div");
75 function DisplayItems(){
76
77 items_length = items.length;
78
79 for(i = 0; i<items_length; i++){
80 item = document.createElement("div");
81 item.classList.add("item");
82
83 song_img = document.createElement("img");
84 song_img.setAttribute('src', items[i].image);
85 song_img.setAttribute('alt', 'song image');
86
87 song = document.createElement("p");
88 song.classList.add("song");
89
90 singer = document.createElement("p");
91 singer.classList.add("singer");
92
93 song_name = document.createTextNode(items[i].song);
94 singer_name = document.createTextNode(items[i].singer);
95 song.appendChild(song_name);
96 singer.appendChild(singer_name);
97
98 element = document.getElementById("mainRightDiv");
99 item.appendChild(song_img);
100 item.appendChild(song);
101 item.appendChild(singer);
102
103 j = 0;
104 for(j; j<items[i].positive_rating; j++){
105
106 Rating_img = document.createElement("img");
107 Rating_img.setAttribute('src', ratingImages.rating);
108 Rating_img.setAttribute('alt', 'Rating image');
109 anchor = document.createElement('a');
110 anchor.setAttribute('class', 'rating');
111 anchor.setAttribute('href', '#');
112
113 anchor.appendChild(Rating_img);
114 item.appendChild(anchor);
115 }
116 for(j; j<5; j++){
117 Rating_img = document.createElement("img");
118 Rating_img.setAttribute('src', ratingImages.no_rating);
119 Rating_img.setAttribute('alt', 'No Rating image');
120
121 anchor = document.createElement('a');
122 anchor.setAttribute('class', 'rating');
123 anchor.setAttribute('href', '#');
124
125 anchor.appendChild(Rating_img);
126 item.appendChild(anchor);
127 }
128 oldItems = document.getElementsByClassName("item");
129 if(oldItems[i]!=undefined){
130
131 element.replaceChild(item, oldItems[i]);
132
133 }
134 else{
135 element.appendChild(item);
136 }
137
138 }
139
140 }
141 // onload event Listner
142 window.addEventListener("load", DisplayItems);
143
144 // function to sort array on the basis of Artist Name
145
146 var ArtistSort = document.getElementById("ArtistClick");
147 if (ArtistSort.addEventListener) {
148 ArtistSort.addEventListener("click", SortByArtist);
149 } else if (ArtistSort.attachEvent) {
150 ArtistSort.attachEvent("onclick", SortByArtist);
151 }
152
153
154 function SortByArtist(){
155 items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
156 DisplayItems();
157 }
158
159 // Sort by Ratings
160
161 var RatingSort = document.getElementById("RatingClick");
162 if (RatingSort.addEventListener) {
163 RatingSort.addEventListener("click", SortByRatings);
164 } else if (RatingSort.attachEvent) {
165 RatingSort.attachEvent("onclick", SortByRatings);
166 }
167
168 function SortByRatings(){
169 items.sort(function(a,b) {return a.positive_rating - b.positive_rating;});
170 DisplayItems();
171
172 }
173
174 // Seach By Artist Name
175 Search = document.getElementById("SearchByArtistName");
176
177 Search.addEventListener('keyup',SearchByName);
178
179 function SearchByName(){
180
181 ArtistNameArray = [];
182 ParentDiv = document.createElement("div");
183 //PresentItems = document.getElementsByClassName("item");
184
185 n = 0;
186 items_length = items.length;
187 for(n = 0; n<items_length; n++){
188 if(items[n].singer.toLowerCase().search(Search.value.toLowerCase())>=0){
189 ArtistNameArray.push(items[n])
190 }
191 }
192
193 if(ArtistNameArray.length===0){
194 tag = document.createElement("p");
195 msg = document.createTextNode("No Result Found");
196 tag.appendChild(msg);
197 ParentDiv.appendChild(tag)
198 document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;
199 console.log("NO RESULT");
200
201 }
202 else{
203
204 for(n = 0; n<ArtistNameArray.length; n++){
205 item = document.createElement("div");
206 item.classList.add("item");
207
208 song_img = document.createElement("img");
209 song_img.setAttribute('src', ArtistNameArray[n].image);
210 song_img.setAttribute('alt', 'song image');
211
212 song = document.createElement("p");
213 song.classList.add("song");
214
215 singer = document.createElement("p");
216 singer.classList.add("singer");
217
218 song_name = document.createTextNode(ArtistNameArray[n].song);
219 singer_name = document.createTextNode(ArtistNameArray[n].singer);
220 song.appendChild(song_name);
221 singer.appendChild(singer_name);
222
223 element = document.getElementById("mainRightDiv");
224 item.appendChild(song_img);
225 item.appendChild(song);
226 item.appendChild(singer);
227
228 j = 0;
229 for(j; j<ArtistNameArray[n].positive_rating; j++){
230
231 Rating_img = document.createElement("img");
232 Rating_img.setAttribute('src', ratingImages.rating);
233 Rating_img.setAttribute('alt', 'Rating image');
234 anchor = document.createElement('a');
235 anchor.setAttribute('class', 'rating');
236 anchor.setAttribute('href', '#');
237
238 anchor.appendChild(Rating_img);
239 item.appendChild(anchor);
240 }
241 for(j; j<5; j++){
242 Rating_img = document.createElement("img");
243 Rating_img.setAttribute('src', ratingImages.no_rating);
244 Rating_img.setAttribute('alt', 'No Rating image');
245
246 anchor = document.createElement('a');
247 anchor.setAttribute('class', 'rating');
248 anchor.setAttribute('href', '#');
249
250 anchor.appendChild(Rating_img);
251 item.appendChild(anchor);
252 }
253
254 ParentDiv.appendChild(item);
255 }
256 console.log(ParentDiv);
257 document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;
258
259 }
260 }
261
262 }
263 catch(err){
264 alert(err);
265 }
266
267
268 });
269
1
2 body{
3
4 margin: 0;
5 padding: 0;
6 width: 100% auto;
7 font-family: sans-serif;
8 }
9
10 .clear{
11 clear: both;
12 }
13
14 .header {
15 background-color: #D6D6D6;
16 display: inline-block;
17 border-bottom: 1px solid #AEAEAE;
18 width: 100%;
19 }
20
21 .header .left {
22 float: left;
23 width: 33%;
24 height: 50px;
25 padding: 5px 0px;
26 text-align: center;
27
28 }
29
30 .header .left img{
31 padding: 15px 5px;
32 }
33
34 .slider {
35 -webkit-appearance: none;
36 width: 40%;
37 height: 4px;
38 background: #ABABAB;
39 outline: none;
40 opacity: 0.7;
41 -webkit-transition: .2s;
42 transition: opacity .2s;
43 float: right;
44 margin: 27px 25px 27px 0;
45 }
46
47 .slider:hover {
48 opacity: 1;
49 }
50
51 .slider::-webkit-slider-thumb {
52 -webkit-appearance: none;
53 appearance: none;
54 width: 16px;
55 height: 16px;
56 background: transparent url(images/circal.png) no-repeat center center;
57 background-size: contain;
58 cursor: pointer;
59 }
60
61 .slider::-moz-range-thumb {
62 width: 25px;
63 height: 25px;
64 background: #4CAF50;
65 cursor: pointer;
66 }
67
68 .header .center {
69
70 background-color: #EEEEEF;
71 float: left;
72 width: 33%;
73 height: 50px;
74 padding: 5px 0px;
75 text-align: center;
76 border-right: 1px solid #AEAEAE;
77 border-left: 1px solid #AEAEAE;
78 }
79
80 .header .right {
81 float: left;
82 width: 33%;
83 height: 50px;
84 padding: 5px 0px;
85 text-align: center;
86 }
87
88 .header .right p{
89 display: inline-block;
90 padding: 5px;
91 }
92
93 .header .right input{
94 background-image: url(images/search.png);
95 background-repeat: no-repeat;
96 background-position: 5px;
97 border-radius: 15px;
98 /* padding: 3px; */
99 border-bottom-style: none;
100 margin-left: 40px;
101 margin-right: -40px;
102 width: 40%;
103 }
104
105 .second-header{
106 display: inline-block;
107 width: 100%;
108 }
109 .second-header .left {
110 float: left;
111 width: 33%;
112 height: 30px;
113 padding: 5px 0px;
114 }
115 .second-header .left button {
116 float: right;
117 font-size: 12px;
118 padding: 5px;
119 }
120
121 .second-header .left img{
122 padding: 0px 5px;
123 vertical-align: middle;
124 }
125
126 .second-header .center {
127 float: left;
128 width: 33%;
129 height: 30px;
130 padding: 5px 0px;
131 text-align: center;
132 }
133 .second-header .right {
134 font-family: sans-serif;
135 float: left;
136 width: 33%;
137 height: 30px;
138 text-align: right;
139 }
140
141 .second-header .center p span {
142 color: #2464BD;
143 background-color: #D5E3F7;
144 padding: 5px;
145 border-radius: 5px;
146 margin: 10px;
147 }
148
149 .second-header .right p{
150 display: inline-block;
151 margin: 0;
152 }
153
154 .second-header .right ul{
155 display: inline-block;
156 margin: 0;
157 padding: 10px;
158 }
159
160 .second-header .right ul li{
161 display: inline-block;
162 padding: 0px 15px;
163 margin: 0;
164 border-right: 1px solid #818181;
165 }
166 .second-header .right ul li:last-child{
167 border-right: none;
168 }
169
170 .second-header .right ul li a{
171
172 text-decoration: none;
173 }
174
175 .main-div{
176 height: 700px;
177 border-bottom: 1px solid #DFDFDF;
178 border-top: 1px solid #DFDFDF;
179 }
180
181 .main-div .left-div{
182 width: 16%;
183 float: left;
184 border-right: 1px solid #DFDFDF;
185 font-size: 12px;
186 margin-right: 11px;
187 }
188
189 .main-div .right-div{
190 width: 83%;
191 float: left;
192
193 }
194
195 .main-div .left-div .show-text{
196 margin: 0;
197 color: #999AA2;
198 padding: 5px;
199
200 }
201
202
203 .main-div .left-div ul{
204 display: block;
205 margin: 0;
206 padding: 0;
207 padding-top: 5px;
208
209 }
210
211 .main-div .left-div ul li{
212 display: block;
213 padding: 0px 10px;
214 margin: 0;
215 padding-top: 5px;
216 white-space: nowrap;
217 overflow: hidden;
218 text-overflow: ellipsis;
219
220 }
221
222 .main-div .left-div ul li a {
223 color: black;
224 text-decoration: none;
225 }
226
227 .main-div .left-div ul li a:hover {
228 background-color: #DBDBDB;
229 }
230
231 .main-div .left-div ul li img{
232 padding-right: 3px;
233 }
234
235 .main-div .left-div .buttom{
236 width: 100%;
237 margin-top: 92px;
238 border-top: 1px solid #F6F6F6;
239 }
240 .main-div .left-div .buttom img{
241 padding: 5px;
242 }
243 .main-div .right-div .item{
244 display: inline-block;
245 padding: 15px;
246 width: 16%;
247 border: 1px solid transparent;
248 }
249
250 .main-div .right-div .item:hover {
251 cursor: pointer;
252 border: 1px solid black;
253
254 }
255
256 .main-div .right-div .item .song{
257 margin: 5px 0px;
258 font-size: 12px;
259 white-space: nowrap;
260 overflow: hidden;
261 text-overflow: ellipsis;
262 }
263
264 .main-div .right-div .item .singer{
265 margin: 5px 0px;
266 font-size: 11px;
267 color: #999AA2;
268 white-space: nowrap;
269 overflow: hidden;
270 text-overflow: ellipsis;
271 }
272
273 .main-div .right-div .item .rating{
274 padding: 1px;
275 }
276
277 .footer p{
278 text-align: center;
279 background-color: #DCDCDC;
280 padding: 5px;
281 font-size: 12px;
282 margin: 0;
283 border-top: 1px solid #b1afaf;
284 }
285
286
287 .dropdown {
288 position: relative;
289 display: inline-block;
290 }
291
292 .dropdown-content {
293 display: none;
294 position: absolute;
295 background-color: #f1f1f1;
296 min-width: 160px;
297 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
298 z-index: 1;
299 }
300
301 .dropdown-content a {
302 color: black;
303 padding: 12px 16px;
304 text-decoration: none;
305 display: block;
306 }
307
308 .dropdown-content a:hover {background-color: #ddd}
309
310 .dropdown:hover .dropdown-content {
311 display: block;
312 }
...\ No newline at end of file ...\ No newline at end of file