create top page ID1

Gemfile

@@ -7,6 +7,8 @@ ruby '3.0.1'
 gem 'rails', '~> 6.1.3', '>= 6.1.3.2'
 gem 'bootstrap', '~> 5.0.1'
 gem 'nokogiri', '~> 1.11', '>= 1.11.7'
+gem 'html2slim'
+gem 'slim-rails'
 
 
 # Use sqlite3 as the database for Active Record

Gemfile.lock

@@ -90,6 +90,9 @@ GEM
     ffi (1.15.3)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
+    hpricot (0.8.6)
+    html2slim (0.2.0)
+      hpricot
     i18n (1.8.10)
       concurrent-ruby (~> 1.0)
     jbuilder (2.11.2)
@@ -169,6 +172,13 @@ GEM
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
     semantic_range (3.0.0)
+    slim (4.1.0)
+      temple (>= 0.7.6, < 0.9)
+      tilt (>= 2.0.6, < 2.1)
+    slim-rails (3.3.0)
+      actionpack (>= 3.1)
+      railties (>= 3.1)
+      slim (>= 3.0, < 5.0)
     spring (2.1.1)
     sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
@@ -177,6 +187,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
+    temple (0.8.2)
     thor (1.1.0)
     tilt (2.0.10)
     turbolinks (5.2.1)
@@ -215,6 +226,7 @@ DEPENDENCIES
   bootstrap (~> 5.0.1)
   byebug
   capybara (>= 3.26)
+  html2slim
   jbuilder (~> 2.7)
   listen (~> 3.3)
   mysql2 (~> 0.5.3)
@@ -224,6 +236,7 @@ DEPENDENCIES
   rails (~> 6.1.3, >= 6.1.3.2)
   sass-rails (>= 6)
   selenium-webdriver
+  slim-rails
   spring
   turbolinks (~> 5)
   tzinfo-data

app/assets/stylesheets/custom.scss

+@import "bootstrap";
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
+/* header */
+#logo {
+  float: left;
+  margin-right: 10px;
+  margin-left: 80px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+}
+
+.navbar ul li a {
+    color: rgb(255, 255, 255);
+    font-size: 18px;
+    font-weight: bold;
+    padding: 4px 15px;
+    text-decoration: none;
+    &:hover {
+      color: rgb(107, 107, 107);
+      text-decoration: none;
+  }
+}
+
+.container a{
+  color: rgb(14, 14, 14);
+  text-decoration: none;
+  &:hover {
+    color: orange;
+  }
+}
+
+
+
+
+

app/controllers/top_controller.rb

+class TopController < ApplicationController
+  def home
+    @job = Job.joins(:cities).order('created_at DESC').limit(5)
+    @city = City.joins(:jobs).group(:name).order('count_all DESC').count.take(9)
+    @industry = Industry.joins(:jobs).group(:name).order('count_all DESC').count.take(9)
+  end
+end

app/helpers/top_helper.rb

+module TopHelper
+end

app/views/layouts/_footer.html.slim

+footer.text-center.text-lg-start.bg-dark.text-muted
+  section.d-flex.justify-content-center.justify-content-lg-between.p-4.border-bottom
+    .me-5.d-none.d-lg-block
+      span
+        | Get connected with me on social networks:
+    div
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-facebook-f
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-twitter
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-google
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-instagram
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-linkedin
+      a.me-4.text-reset[href=""]
+
+      i.fab.fa-github
+  section
+    .container.text-center.text-md-start.mt-5
+      .row.mt-3
+        .col-md-3.col-lg-4.col-xl-3.mx-auto.mb-4
+          h6.text-uppercase.fw-bold.mb-4
+            i.fas.fa-gem.me-3
+            | Name 
+          p
+            |  NGUYỄN HOÀNG MAI PHƯƠNG 
+        .col-md-2.col-lg-2.col-xl-2.mx-auto.mb-4
+
+          h6.text-uppercase.fw-bold.mb-4
+            |  SCHOOL 
+          p
+            a.text-reset[href="#!"]
+              | Banking University
+        .col-md-3.col-lg-2.col-xl-2.mx-auto.mb-4
+
+          h6.text-uppercase.fw-bold.mb-4
+            |  MAJOR
+          p
+            a.text-reset[href="#!"]
+              | MIS
+        .col-md-4.col-lg-3.col-xl-3.mx-auto.mb-md-0.mb-4
+
+          h6.text-uppercase.fw-bold.mb-4
+            |  Contact 
+
+          i.fas.fa-envelope.me-3
+          |  phuongnhm@zigenxn.vn

app/views/layouts/_header.html.slim

+header
+  nav.navbar.navbar-expand-lg.navbar-light.bg-dark
+    .container-fluid
+      = image_tag "logo.png", alt: "logo", id: "logo"
+      #navbarExample01.collapse.navbar-collapse
+        ul.navbar-nav.ms-auto.mb-2.mb-lg-0
+          li.nav-item.active
+            = link_to "Login", '#'
+          li.nav-item
+            = link_to "Sign up", '#'
+          li.nav-item
+            = link_to "Favourite", '#'
+          li.nav-item
+            = link_to "History", '#'

app/views/layouts/_shim.html.slim

+

app/views/layouts/application.html.erb

-<!DOCTYPE html>
-<html>
-  <head>
-    <title>VeNJOB</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
-</html>

app/views/layouts/application.html.slim

+doctype html
+html
+  head
+    title
+      = yield(:title)
+      |  | VeNJOB
+    meta[name="viewport" content="width=device-width,initial-scale=1"]
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
+    link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"]
+    = render 'layouts/shim'
+  body.bg-light
+    = render 'layouts/header'
+    .container
+      = yield
+    = render 'layouts/footer'

app/views/layouts/mailer.html.erb

-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <style>
-      /* Email styles need to be inline */
-    </style>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
-</html>

app/views/layouts/mailer.html.slim

+doctype html
+html
+  head
+    meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]
+    style
+      |  /* Email styles need to be inline */ 
+  body
+    = yield

app/views/layouts/mailer.text.erb

-<%= yield %>

app/views/layouts/mailer.text.slim

+= yield

app/views/top/home.html.slim

+- provide :title, 'Jobs'
+
+.container
+  .input-group.py-3
+    input.form-control.rounded[type="search" placeholder="Search . . ." aria-label="Search" aria-describedby="search-addon"]
+    button.btn.btn-outline-primary[type="button"]
+      | search
+      
+  h4.py-4
+    | Latest Jobs
+    - @job.each do |job| 
+        .card.my-3
+          .card-body.text-dark
+            h5.mb-1
+              = link_to job.title, "#"
+            h6.mb-1
+              = link_to job.company.name, "#"
+            h6.mb-1
+              | Lương: 
+              = job.salary
+            h6.mb-1
+              - job.cities.each do |city| 
+                  = city.name
+
+  h4
+    | Top Cities
+    .row.my-3.text-center
+      - @city.each do |name,amount|
+        .col-4.p-2.border.mb-1
+          = link_to name, "#"
+          p.mb-1
+          = amount
+    .d-flex.flex-row-reverse.p-2
+      = link_to 'All Cities', "#"
+
+  h4
+    | Top Industries
+    .row.my-3.text-center
+      - @industry.each do |name,amount|
+          .col-4.p-2.border.mb-1
+            = link_to name, "#"
+            p.mb-1
+            = amount
+    .d-flex.flex-row-reverse.p-2
+      = link_to 'All Industries', "#"
+
+
+              
+
+
+
+

config/routes.rb

 Rails.application.routes.draw do
-  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+  root 'top#home'
+  get  '/', to: 'top#home'
+  resources :jobs
 end