Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails

Ruby on Rails Tutorial AngularJS form validation, error messages

$ vi app/assets/templates/users/new.html.erb

<div ng-controller="UsersNewCtrl" class="row">
<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign up</h1>
    <form name="userNewForm" novalidate>
      <div class="well">
        <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}">
          <label>Name</label>
          <input name="name" class="form-control"
            ng-model="user.name"
            required
            ng-maxlength="20" />
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required">
            Name can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength">
            Name is too long (maximum is 20 characters)
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}">
          <label>Email</label>
          <input type="email" name="email" class="form-control"
            ng-model="user.email"
            required />
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required">
            Email can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email">
            Email is invalid
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}">
          <label>Password</label>
          <input type="password" name="password" class="form-control"
            ng-model="user.password"
            required
            ng-minlength="6" />
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required">
            Password can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength">
            Password is too short (minimum is 6 characters)
          </span>
        </div>
..............
        <button ng-click="submit()" class="btn btn-primary"
                ng-disabled="userNewForm.$invalid" >
          Create my account
        </button>
      </div>
    </form>
  </div>
</div>

 

Ruby on Rails

Ruby on Rails Tutorial static pages,navigation menu link

(1)Rails layout file

*Bootstrap3 "container"

$ vi app/views/layouts/application.html.erb

<body>
<%= render 'layouts/header' %>
<div class="container">
  <div ng-view></div>
  <%= render 'layouts/footer' %>
</div>

</body>

(2)static pages

1)home

*Bootstrap3 Jumbotron, text-center
*rails.png app/assets/images/rails.png
ref.http://rubyonrails.org/images/rails.png

$ vi app/assets/templates/static_pages/home.html.erb

<div class="jumbotron">
  <h1>Welcome to the Sample App</h1>
  <p class="text-center">
    This is the home page for the
    <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </p>
</div>
<a href="http://rubyonrails.org/"><img alt="Rails" src="/assets/rails.png" /></a>

2)help

$ vi app/assets/templates/static_pages/help.html.erb

<h1 class="text-center">Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="http://railstutorial.jp/help">Rails Tutorial help page</a>.
  To get help on this sample app, see the
  <a href="http://railstutorial.jp/book">Rails Tutorial book</a>.
</p>

3)about

$ vi app/assets/templates/static_pages/about.html.erb

<h1 class="text-center">About Us</h1>
<p>
  The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
  is a project to make a book and screencasts to teach web development
  with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
  is the sample application for the tutorial.
</p>

4)contact

$ vi app/assets/templates/static_pages/contact.html.erb

<h1 class="text-center">Contact</h1>
<p>
  Contact Ruby on Rails Tutorial about the sample app at the
  <a href="http://railstutorial.jp/contact">contact page</a>.
</p>

(3)navigation menu link

1)header

$ vi app/views/layouts/_header.html.erb

1.site

<%= link_to "Sample App", "/static_pages/home", class: "navbar-brand" %>

2.home,help

<ul class="nav navbar-nav navbar-right">
  <li><%= link_to "Home", "/static_pages/home" %></li>
  <li><%= link_to "Help", "/static_pages/help" %></li>
</ul>

2)footer

$ vi app/views/layouts/_footer.html.erb

<ul class="nav nav-pills pull-right">
  <li><%= link_to "About", "/static_pages/about" %></li>
  <li><%= link_to "Contact", "/static_pages/contact" %></li>
  <li><a href="http://news.railstutorial.org/">News</a></li>
</ul>

 

Ruby on Rails

Ruby on Rails Tutorial Bootstrap3,footer menu

1)footer partial

*Bootstrap3 "nav nav-pills"
*Bootstrap3 "pull-right"

$ vi app/views/layouts/_footer.html.erb

<div class="footer">
  <ul class="nav nav-pills pull-right">
    <li><%= link_to "About",   '#' %></li>
    <li><%= link_to "Contact", '#' %></li>
    <li><a href="http://news.railstutorial.org/">News</a></li>
  </ul>
  <small>
    <a href="http://railstutorial.org/">Rails Tutorial</a>
    by Michael Hartl
  </small>
</div>

2)application.html.erb

$ vi app/views/layouts/application.html.erb

.....
<body>
  <%= render 'layouts/header' %>
  <%= render 'layouts/footer' %>
</body>
</html>

3)css

$ vi app/assets/stylesheets/custom.css.scss

/* footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}