From 38d8b1909f8b07c137da84236ae6db8e317c4d27 Mon Sep 17 00:00:00 2001 From: Haitham Mogherbi Date: Thu, 27 Jul 2017 11:50:16 +0800 Subject: [PATCH 1/5] I did this in class: Made a clone of Bitly.com web app 1-shortened the urls 2-made click count work 3-made long and short url clickable 4-isnerted bootstramp link into it 5-validation for url done --- app/controllers/static.rb | 43 ++++++++++++++++++- app/models/url.rb | 6 +++ app/views/layouts/application.erb | 7 ++- app/views/static/index.erb | 41 +++++++++++++++++- db/migrate/20170726121009_create_urls.rb | 10 +++++ .../20170727104024_add_click_count_to_urls.rb | 5 +++ notes.txt | 5 +++ public/css/application.css | 34 +++++++++++++++ 8 files changed, 147 insertions(+), 4 deletions(-) create mode 100644 app/models/url.rb create mode 100644 db/migrate/20170726121009_create_urls.rb create mode 100644 db/migrate/20170727104024_add_click_count_to_urls.rb create mode 100644 notes.txt diff --git a/app/controllers/static.rb b/app/controllers/static.rb index 33c1897..b6593be 100644 --- a/app/controllers/static.rb +++ b/app/controllers/static.rb @@ -1,3 +1,44 @@ +require 'securerandom' + get '/' do + @urls = Url.all.order("created_at DESC") erb :"static/index" -end \ No newline at end of file +end + +post '/shorten' do + @url = Url.new(long_urls: params["long_urls"], short_urls: SecureRandom.hex(4)) + #creates a ew object called @url then using the short_urls: SecureRandom.hex(4) this generates a secure random output that has a lower probability of redundancy. + if @url.save + # p params + # "example" + redirect '/' #redirects the user back to the 'root' or main web page +else #i need my code to rememeber my error variable when its not saved successfully, thats why i load the erb instead of redirecting to "/" because once i do reidrecting to '/' my code will forget the defiend local variable + #this is the error message given from ActiveRecord because it does not pass the validation stated on m odel urb + @errors = @url.errors.full_messages.join(",") +end + @urls = Url.all.order("created_at DESC") + erb :"static/index" +end + +post '/:url_id/vote' do + # whatever you see on the browser is the value, and then the key i set to id by inserting : here + # 1-find out which url i am upvoting + @url = Url.find(params[:url_id]) + + @url.click_count +=1 + @url.save + redirect '/' + +end + +get '/:shortshort' do + #1 look for this url now + #2 increase the lick count because ijust clicked on the short url + #3 i will redirect to the l;ong url (original website) + #look for this url now + @url = Url.find_ny(short_urls: params[:shortshort]) + @url.click_count +=1 + @url.save + rediirect to "#{@url.long_urls}" + +end diff --git a/app/models/url.rb b/app/models/url.rb new file mode 100644 index 0000000..51781bc --- /dev/null +++ b/app/models/url.rb @@ -0,0 +1,6 @@ +class Url < ActiveRecord::Base + validates :long_urls, uniqueness: true + validates :long_urls, format: {with: (URI::regexp(['http', 'https'])), message: "Entrered URL is Invalid!"} + # This is Sinatra! Remember to create a migration! + #above validatesusing the "validates at lines 2 & 3" +end diff --git a/app/views/layouts/application.erb b/app/views/layouts/application.erb index 4b47fec..3548b37 100644 --- a/app/views/layouts/application.erb +++ b/app/views/layouts/application.erb @@ -1,8 +1,13 @@ Sinatra Framework + + + + <%= yield %> - \ No newline at end of file + + diff --git a/app/views/static/index.erb b/app/views/static/index.erb index 622f8bb..4583167 100644 --- a/app/views/static/index.erb +++ b/app/views/static/index.erb @@ -1,2 +1,39 @@ -

Hello World

-

See Me in views/static/index.html.erb

\ No newline at end of file +

Bitly Clone

+ + +

<%= @errors if @errors %>

+ + +
+ + +
+ + + + + + + + + <% @urls.each do |url| %> + + + + + + + + + <% end %> +
Long URLShort URLClick Count
+ + + + + <%= url.short_urls %> + + <%= url.click_count %> +
+
diff --git a/db/migrate/20170726121009_create_urls.rb b/db/migrate/20170726121009_create_urls.rb new file mode 100644 index 0000000..421be80 --- /dev/null +++ b/db/migrate/20170726121009_create_urls.rb @@ -0,0 +1,10 @@ +class CreateUrls < ActiveRecord::Migration[5.0] + def change + create_table :urls do |t| #we just created a new table called "urls" + t.string :long_urls #we created a new column of strings called long_urls + t.string :short_urls #we created a new column of strings called short_urls + + t.timestamps #we created a new column called t.timestamps which automatically creates two new columns: one is created_at and one called updated_at + end + end +end diff --git a/db/migrate/20170727104024_add_click_count_to_urls.rb b/db/migrate/20170727104024_add_click_count_to_urls.rb new file mode 100644 index 0000000..67981d6 --- /dev/null +++ b/db/migrate/20170727104024_add_click_count_to_urls.rb @@ -0,0 +1,5 @@ +class AddClickCountToUrls < ActiveRecord::Migration[5.0] + def change + add_column :urls, :click_count, :integer, default: 0 + end +end diff --git a/notes.txt b/notes.txt new file mode 100644 index 0000000..bf9a419 --- /dev/null +++ b/notes.txt @@ -0,0 +1,5 @@ +incorporate bootstrap cdn link so that i can see my shortened link in a nicer table + +- validations (url, means i cant enter any invalid, i cant enter repetitive link +-if the entry is saved, then good. if the entry is not valid, how should i deal with it? Should i enter an error message manually? or should i just borrow the validation error message from active record +Click count for the link that we shortened diff --git a/public/css/application.css b/public/css/application.css index e69de29..25c8671 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -0,0 +1,34 @@ +body{ + background-color: yellow; +} + +h1 { + color: red; + font-size: 110px; + font-style: italic; + font-family: Chalkduster; + font-weight: 900; + text-align: center; + margin-top: 90px; +} + +form { + margin-top: 1cm; + margin-left: 9.7cm; +} + +input { + font-size: 55px; + +} + +table { + border-collapse: separate; + border-spacing: 0 .75em; +} + +#shorten-btn { + -webkit-appearance: button; + font-size: 50px; + height: inherit; +} From 80d4d83293d2d778b584a5c8ac8d2fad6a1a66b2 Mon Sep 17 00:00:00 2001 From: Haitham Mogherbi Date: Thu, 27 Jul 2017 12:43:14 +0800 Subject: [PATCH 2/5] changed the background color to green --- app/views/layouts/application.erb | 5 +---- db/migrate/20170726121009_create_urls.rb | 1 - public/css/application.css | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/app/views/layouts/application.erb b/app/views/layouts/application.erb index 3548b37..5118f63 100644 --- a/app/views/layouts/application.erb +++ b/app/views/layouts/application.erb @@ -2,12 +2,9 @@ Sinatra Framework - - - + <%= yield %> - diff --git a/db/migrate/20170726121009_create_urls.rb b/db/migrate/20170726121009_create_urls.rb index 421be80..43bedf7 100644 --- a/db/migrate/20170726121009_create_urls.rb +++ b/db/migrate/20170726121009_create_urls.rb @@ -3,7 +3,6 @@ def change create_table :urls do |t| #we just created a new table called "urls" t.string :long_urls #we created a new column of strings called long_urls t.string :short_urls #we created a new column of strings called short_urls - t.timestamps #we created a new column called t.timestamps which automatically creates two new columns: one is created_at and one called updated_at end end diff --git a/public/css/application.css b/public/css/application.css index 25c8671..e322178 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -1,5 +1,5 @@ body{ - background-color: yellow; + background-color: green; } h1 { From 2d2f8322a49b29fc2a2dbcb52d55be469eef8b77 Mon Sep 17 00:00:00 2001 From: Haitham Mogherbi Date: Thu, 27 Jul 2017 12:45:28 +0800 Subject: [PATCH 3/5] declared ruby version 2.4.0 --- .ruby-version | 1 - Gemfile | 2 +- Gemfile.lock | 5 ++++- 3 files changed, 5 insertions(+), 3 deletions(-) delete mode 100644 .ruby-version diff --git a/.ruby-version b/.ruby-version deleted file mode 100644 index 197c4d5..0000000 --- a/.ruby-version +++ /dev/null @@ -1 +0,0 @@ -2.4.0 diff --git a/Gemfile b/Gemfile index 74d024e..32ad0a5 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,7 @@ source 'https://rubygems.org' # Ruby Version -# ruby "2.2.1" +ruby "2.4.0" # Adding Sinatra Drivers gem 'sinatra' diff --git a/Gemfile.lock b/Gemfile.lock index 9d709e3..df897ce 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -91,5 +91,8 @@ DEPENDENCIES sinatra-contrib thin +RUBY VERSION + ruby 2.4.0p0 + BUNDLED WITH - 1.15.1 + 1.15.2 From 4105190ae1d5ce54b982471fc897de2172150dde Mon Sep 17 00:00:00 2001 From: Haitham Mogherbi Date: Fri, 28 Jul 2017 12:12:26 +0800 Subject: [PATCH 4/5] 1-I changed the background color back to yellow, 2-created a blue border around table & buttons 3-changed font of Vote button to red 4-created a dashed border around the insert box 5-Created a blue backgorund inside of the table. 6-got rid of the green background color. --- .byebug_history | 5 +++++ 27JulyNotes2.txt | 8 ++++++++ app/controllers/static.rb | 5 +++++ app/views/layouts/application.erb | 6 ++++++ app/views/static/index.erb | 6 +++--- notes.txt | 18 ++++++++++++++++- public/css/application.css | 32 +++++++++++++++++++++++++------ public/js/application.js | 21 ++++++++++++++++++++ public/test.js | 22 +++++++++++++++++++++ 9 files changed, 113 insertions(+), 10 deletions(-) create mode 100644 .byebug_history create mode 100644 27JulyNotes2.txt create mode 100644 public/test.js diff --git a/.byebug_history b/.byebug_history new file mode 100644 index 0000000..6cb0a53 --- /dev/null +++ b/.byebug_history @@ -0,0 +1,5 @@ +c +params +params[:long_url] +params +@url diff --git a/27JulyNotes2.txt b/27JulyNotes2.txt new file mode 100644 index 0000000..6063d15 --- /dev/null +++ b/27JulyNotes2.txt @@ -0,0 +1,8 @@ +AJAX is a developer's dream, because you can: + +-Update a web page without reloading the page +-Request data from a server - after the page has loaded +-Receive data from a server - after the page has loaded +-Send data to a server - in the background + +document.get(elementbyID) diff --git a/app/controllers/static.rb b/app/controllers/static.rb index b6593be..b722753 100644 --- a/app/controllers/static.rb +++ b/app/controllers/static.rb @@ -40,5 +40,10 @@ @url.click_count +=1 @url.save rediirect to "#{@url.long_urls}" +end +post "/test" do + @url = Url.new(long_urls: params[:long_urls], short_urls: SecureRandom.hex(4)) + @url.save + @url.to_json end diff --git a/app/views/layouts/application.erb b/app/views/layouts/application.erb index 5118f63..f47a657 100644 --- a/app/views/layouts/application.erb +++ b/app/views/layouts/application.erb @@ -3,6 +3,12 @@ Sinatra Framework + + <%= yield %> diff --git a/app/views/static/index.erb b/app/views/static/index.erb index 4583167..df5cfe8 100644 --- a/app/views/static/index.erb +++ b/app/views/static/index.erb @@ -4,8 +4,8 @@

<%= @errors if @errors %>

-
- + +
@@ -19,7 +19,7 @@ <% @urls.each do |url| %> - <%= url.long_urls %> diff --git a/notes.txt b/notes.txt index bf9a419..84ee392 100644 --- a/notes.txt +++ b/notes.txt @@ -1,5 +1,21 @@ incorporate bootstrap cdn link so that i can see my shortened link in a nicer table -- validations (url, means i cant enter any invalid, i cant enter repetitive link +1- validations (url, means i cant enter any invalid, i cant enter repetitive link -if the entry is saved, then good. if the entry is not valid, how should i deal with it? Should i enter an error message manually? or should i just borrow the validation error message from active record Click count for the link that we shortened + + + +to commit and push changes to Heroku +1- make my changes to my local files +2- test it on my 127.0.0.1:9393 or see link below: (http://127.0.0.1:9393) by typing into my terminal : + - $ rake server +3- when its successful or i approve changes: do below steps: + +$ git add . +$ git commit +- (enter commit message e.g. "i changed background color") +- esc +- :wq! + +$ git push heroku master diff --git a/public/css/application.css b/public/css/application.css index e322178..afb82c5 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -1,10 +1,10 @@ body{ - background-color: green; + background-color: yellow; } h1 { color: red; - font-size: 110px; + font-size: 130px; font-style: italic; font-family: Chalkduster; font-weight: 900; @@ -13,22 +13,42 @@ h1 { } form { - margin-top: 1cm; - margin-left: 9.7cm; + margin-top: 1.75cm; + margin-left: 7cm; } input { + border: 9px solid navy; font-size: 55px; } +tr { + color: red; + +} + +th { + color: red; + column-fill: balance; + background-color: blue; + border-style: dotted; + /*border-spacing: 10px;*/ + color: white; +} table { + color: red; + background-color: DeepSkyBlue; + border: 20px solid red; border-collapse: separate; - border-spacing: 0 .75em; + border-spacing: 0 1em; + /*border-style: groove;*/ + } #shorten-btn { -webkit-appearance: button; - font-size: 50px; + font-size: 55px; height: inherit; + color: red; } diff --git a/public/js/application.js b/public/js/application.js index e69de29..a070134 100644 --- a/public/js/application.js +++ b/public/js/application.js @@ -0,0 +1,21 @@ +$(document).ready(funciton(){ + $("#create_url").on("submit", function(event){ + event.preventDefault() + form_inputs = $(this).serialize() + $.ajax({ + url: "/test", + method: "post", + data: form_inputs, + dataType: "json", + success: function(data){ + $("tbody").append( + "" + + data.long_url + "" + + "" + + data.short_url + + "0" + ) + } + }) + }) +}) diff --git a/public/test.js b/public/test.js new file mode 100644 index 0000000..7618684 --- /dev/null +++ b/public/test.js @@ -0,0 +1,22 @@ +$(document).ready(function(){ + $("#create_url").on("submit", function(event){ + event.preventDefault() + form_inputs = $(this).serialize() + $.ajax({ + url: "/test", + method: "post", + data: form_inputs, + dataType: "json", + success: function(data){ + debugger + $("tbody").append( + "" + + data.long_urls + "" + + "" + + data.short_urls + + "0" + ) + } + }) + }) +}) From 7fca5b203fe2a24006b468e1af13be3b98679e26 Mon Sep 17 00:00:00 2001 From: Haitham Mogherbi Date: Fri, 28 Jul 2017 12:21:53 +0800 Subject: [PATCH 5/5] modified notes.txt to include git push origin master --- notes.txt | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/notes.txt b/notes.txt index 84ee392..54333ea 100644 --- a/notes.txt +++ b/notes.txt @@ -4,7 +4,7 @@ incorporate bootstrap cdn link so that i can see my shortened link in a nicer ta -if the entry is saved, then good. if the entry is not valid, how should i deal with it? Should i enter an error message manually? or should i just borrow the validation error message from active record Click count for the link that we shortened - +***************************************** to commit and push changes to Heroku 1- make my changes to my local files @@ -18,4 +18,6 @@ $ git commit - esc - :wq! -$ git push heroku master +$ git push (origin/heroku) master + +*****************************************