Where do I put previously made HTML files in a Rails application? - html

I made a website with Twitter bootstrap and the design is finished in terms of all the HTML and CSS.
Now I need to add functions like making an account and blogging. I decided to use Ruby on Rails to do this, but I have no idea where to put the files and how to connect them.
So far I have figured out that I want to put them in the "views" folder and have it say, for example, "index.html.erb" but I don't know if that goes into another folder in "views" or how any of that works.
I also don't know where to put all the CSS and JavaScript incorporated with bootstrap.

Following Rails conventions, views should go in a dir that mirrors the model name (plural), which also aligns with the controller name. i.e. model = user, views dir = users, controller = users_controller.rb. You should read through at least the first few Rails guides; esp this layout and rendering one:
RE the bootstrap portion of this question, just use the bootstrap-sass gem and follow the instructions for including it in your application.scss and application.js.

Related

Embedding Ruby on Rails Project into HTML File

Problem:
I completed the Ruby on Rails "Hello World" tutorial here which walks you through how to build a blog. Now, I want to see if I can embed the work that I've done into an html file.
What I've looked into:
However, I am not exactly sure how to go about that. I looked into embedded ruby and found a good tutorial/explanation on Tutorials Point and some other sites on Google. Those examples show how to write ruby code within the file though. That seems great if I'm only writing a few lines, but I want to incorporate an entire project.
I also found a link on writing templates, but that didn't seem like what I was looking for either.
Question:
Is there a way I can add my blog to a static html/css site that I've already created?
Something like <% link railsblog %>? Or is there any other way to incorporate the project on an html page?
Thanks for any advice!
So you have a Static Html-Css website. You want to add a blog to it. Right?
The thing is, a Ruby on Rails project (eg: your blog) is not something 'additional' that you can add to a website.
It is a very powerful framework that allows you to build an ENTIRE website within the project.
Once you have a Rails project (your blog) running, you can put all your other existing static html, css, js files into the Rails PUBLIC folder.
Now if start up your server ( run rails server ), and try to access your other pages, you should see them. eg: ( localhost:3000/my-page-name.html )
Now to get localhost:3000 to point to your actual homepage.
In your 'routes.rb' file, add route:
root 'main#index'
Create a new Controller file in controllers:
class MainController < ApplicationController
def index
redirect_to '/index.html'
end
end
You'll have to learn a couple of things about Rails if you're planning to move your entire website to Rails or if you're curious.
This should help you get started.
Or if you're not looking to learn an entire framework for a blog, try this.
Good luck!
I think the solution is to create a partial html.erb file, for intance:
_fileName.html.erb
then you can put inside your html code and render by calling:
<%= render 'layouts/fileName' %>
You can always render a file (e.g static form public folder) or render a view if it has a respective controller/action. Remember that to render a view you need right routing in routes.rb except rendering partials file which should start with underscore e.g _partial.html.erb
If you want to call some resource embeded in other web site you can always use but it has nothing in common with rails.

How can I setup page-specific css files in rails?

I'm using rails to assist me in creating a static website. I have one controller pages. It has 4 action-view pairs: home, team, work, and contact.
Rails has created pages.css.scss for me, but there are elements in each of these pages that have the same name (i.e. class="container" or class="wrapper"), but have varying properties throughout the different pages.
What is the best practice for creating SASS stylesheets that are only applied to specific pages.
One method that I've read of is to use content_for, in which I create stylesheets for each of these pages, and use content_for to include them in the header of each individual page. Are there any negatives associated with this? The only thing I can think of is the fact that I have to tell rails to precompile every one of the page-specific .scss files, which is tedious.
You need content_for and need to restrict loading all tree directory to only those files which are common all over your app.
you can just put the <style></style> directly on the view file

is this a good way to template my site

im planning to do something using bootstrap, where i will split the .jsp in 2 divs, the top one is the menubar.jsp and the other is the contentclicked eg:
start.jsp
<div id="menubar"></div>
<div id="content"></div>
when the users get access(after a login) and go to the http://www.localhost.com/restrict/start
it will run this .js
$(document).ready(function(){
$("#menubar").load("restrict/menubar");
});
the /restrict/menubar is because i have a file called menu.jsp that have the bootstrap code of the menubar
and for each link that the client click in the menubar it will do:
$("#content").load("restrict/linkCliked");
and for each link i will have a linkCliked.jsp
it seems to work, BUT i dont know if this is a good way and secure, because if the use write the uri http://www.localhost.com/restrict/linkCliked, he will get just the linkClicked.jsp, but i want it to render the menubar.jsp too without, is there any solution that i dont have to "include" in each .jsp the menubar?
obs: using VRaptor MVC
Your system seems OK. If you are concerned about the HTML URI being pointed to incorrectly, you can keep your templates in a separate folder than your bootstrap. If your setup is like so:
/var
/var/www
/var/www/html <- your web
You can add a new folder:
/var/www/template
And put linkClicked.jsp and menubar.jsp into that folder, calling them. A user will not be able to type in an address to get to those paths and you won't need to do any funky redirection in your server configuration either.

Which directory do images and stylesheets go in for Ruby on Rails HTML pages?

I finished my Ruby on Rails project and I get extra credit for making it "look good." I made an HTML template with some images and css styling on my local machine (not the RoR server). I've tested it out in plain HTML and it looks good.
I can't figure out how to incorporate it into my RoR project though. I thought i'd be able to create a directory in my views, called "images" to hold the images for my template.
Before transferring all of the code for my RoR to the tags for my template, I wanted to make sure the images were in the right location. I added to my index.html.erb file, but it won't display. I tried moving that images directory to a few other directories and tried again, same thing!
I thought it would be easy to incorporate a template haha but now I'm thinking not?
Is there a way to simply do this like an ordinary HTML website?
There are two main options for this...
You can use the asset pipeline and serve up assets from a location like app/assets... So, app/assets/images.
You can put them in public/images and just serve them up that way as well.
If you feel like learning a bit more, I'd dig into the asset pipeline. If you're just ready to be done, public/images for a small project should work just fine. :)

Magento custom html/css layout - how?

I just installed magento onto a server, and previous to that made a website layout ( basic html website) which i'm aiming to implement as a main layout on the magento site.
I'm new to Magento, and i've tried working with custom wordpress layout with the use of css. Yet this project gives me the assignment to use the html/css layout and change if not delete the default magento template. I Have no idea how to even get started at this.
Can anyone give me some pinpointers? if not just a link to a tutorial.
The idea is the use the layout i made and use it as a template, but with the goal of using Magento's e-shop functionalities.
thank you.
Philip
Magento has a Design folder and a Skin folder to customize your front-end.
File hierarchy
If you set up the folder structure of your custom theme correctly, Magento will only use the files you overwrite in the new theme. If you go to Magento>app>design>frontend you will see a "base" and "default" folder, base is the uppermost folder in this hierarchy.
Design (html + xml layout)
If you want to create a new theme you start with creating a new folder in Magento>app>design>frontend and copy the files you want to change in your theme. So if your theme will change the 1column layout to start with, you'll end up with this:
Magento>app>design>frontend>[YOUR FOLDER]>default>template>page>1column.phtml
Skin (images + css)
Same goes for the Skin folder. When you want to change the main css file for your theme you'll end up with this structure:
Magento>skin>frontend>[YOUR FOLDER]>default>css>styles.css
Setting Current Package
In the Admin panel you will have to go to System>Configuration>Design>Package and set the "Current Package Name" to the name of [YOUR FOLDER].
Manage Stores
You might want to add a store view, store or website to be able to change views so you could for example show a different front-end for different countries or special offers. Make sure you set the package name to the right scope, in this case.