Start the rails server ( rails s) and go to the new product page in the browser. OK, we are done with this small module for our e-commerce application. Your model now looks like to: class Product So, open your Product model and add this piece of code: has_many :pics In the real world, we would say each product has many pictures and each picture belongs to a product. This task is unbelievably simple in Rails applications. Time to setup the association between the Product and Pic models. The change function of your migration file should look like as follows: def change Open it and add a foreign key with this piece of code: add_foreign_key :pics, :products Go to the myapp/db/migrate folder and find the migration file for Pic model. Second, create the pic model and its migration file by entering the following command: rails generate model Pic product_id:integer:index name:text Open your terminal and enter: rails generate model Product name:string description:text The product has a name and a description as well as an id. Let’s create our models and their migration files.įirst, create the model and the migration for our product. We need to create a product and associate these images to this product. If you submit the form right now, you will upload files into the public/uploads directory. In the browser, go to the new product page. Go to the myapp folder and start the server: rails s OK, time to run our application and see what we have already done. Finally, get the list of all uploaded files and return a JSON with a success message and a list of all successfully uploaded files. Then, we upload and rename the files one by one. Then, generate a unique numeric string which is about to be used for making the file names unique. On the server-side, we take the files sent through POST request with the params hash. request.base_url+'/product/create', html: #return a JSON object amd success message if uploading is successful This is the form for creation of your product. Here, we include a form for the creation of a product and a drag-and-drop zone which lets the user to drag images: This section includes the CSS files, basic.css and dropzone.css, which will be used for our drag and drop area: Open app/views/ and enter the following code: Now, I am going to write the client-side before moving on to the server-side implementation. To ensure that our third-party assets are precompiled with the rest of the app. Before moving on, go to myapp/config/initializers/assets.rb and add this line to the file: .precompile += %w(dropzone.js basic.css dropzone.css) This will create two views in your app/views folder and a controller in app/controllers. Open the terminal and enter the following command: rails g controller Product new create Note that we have yielded three sections: css, content, and javascript. Now go to app/views/layouts/ and make a layout template for your app. Go to myapp/app/assets/javascripts, open application.js, and remove the following lines: //= require turbolinksįor further information about //= require turbolinks please read this article. Which means to include bootstrap for our application. We don’t want this to happen, so get rid of it. This line tells Rails to require everything in this directory and all subdirectories. Open application.css and remove this line: *= require_tree. Put dropzone.js into myapp/app/assets/javascripts and all the CSS files into myapp/app/assests/stylesheets. We need to add the Javascript and CSS files for Dropzone and Bootstrap, so please go to the dist folder from the Dropzone and Bootstrap downloads and find the following files: bootstrap.css First, make a new Rails application by opening your terminal and typing: rails new myapp There is a one-to-many association between pictures and product, meaning that a product may have many images. It uploads the pictures on the server, returns the list of uploaded files, and then submits the form to create the product record. Our application is a module of an e-commerce shop to create products and attach pictures to them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |